Cannot call method 'selectDates' of null

[Ben]

I have a page that loads dates into a hidden field.

I'm using Javascript to parse and hilight the dates.  Using an onClick function works perfectly, but I need this to load when the document is ready.  Every time I try this I get "Cannot call method 'selectDates' of null" - which implies that the calendar is not yet loaded.  I tried using the onLoad and onInit events - same error.

Here's the code:

<script type="text/javascript">
    //-------------------------------------------------------------------------------
    function renderDates() {
        //---------------------------------------
        var calendar = $find("<%= cal_Calendar.ClientID %>");
        var hf_Dates = document.getElementById("<%= hf_SelectedDates.ClientID %>");  //hidden field
        var DateStrings = hf_Dates.value.split('|');
        //---------------------------------------
        var Dates = new Array(DateStrings.length);
        for (var i = 0; i < DateStrings.length; i++) {
            var dt = convertToTriplet(DateStrings[i]);  //see function below...
            Dates[i] = dt;
        }
        //---------------------------------------
        calendar.selectDates(Dates);  //ERROR OCCURRS HERE!
    }
    //-------------------------------------------------------------------------------
    function convertToTriplet(dateString) {
        var dp = dateString.split('/');
        var array = new Array(dp[2], dp[0], dp[1]);
        return array;
    }
    //-------------------------------------------------------------------------------
</script>

If I call this using jQuery, I still get the error - what the hell is going on?

Gimzani

 

 

[Kevin]

Hello Ben,

You can try the following:

function pageLoad() {
   renderDates();
}

Please note that if you are using Ajax on your page, this event gets called everytime an ajax request completes. To avoid this, you could also do it this way:

Sys.Application.add_load(renderDates);

function renderDates() {
   ...code that does stuff...

   Sys.Application.remove_load(renderDates);
}

I hope that helps.

[Benjamin Hall]

Kevin:

Your answer was JUST the signpost that I needed to point me in the right direction!

Yes, AJAX WAS interfering with my JS.  The trouble was, when I implemented the solution you juggested, the page got itself into a loop.  Not to worry, though - I was able to get around that by registering the Sys.Application.add_load() method into a temporary call using codebehind script registration - like so:

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        this.Page.ClientScript.RegisterStartupScript(

            this.GetType(),

            "StartupScript",

            "Sys.Application.add_load(renderDates);",

            true);

        //---------------------------------------

        GetEvents();

        RenderEvents();

        //---------------------------------------

    }

}

The Page_Load event in the code behind allowed me to write that line when the page loaded for the first time - and only the first time!

Subsequent page loads are all postbacks and therefore the code was not registered on partial-page loads.

THANKS A HEAP!!

Ben