Why does this javascript/jQuery JSON parsing code not work?

Question

Here is my jQuery code. It should parse the json returned by this php script. The php is known to work. It should also convert the date literals to a javascript date object. However, an error occurs at dates.length. Can anyone see what is wrong with the code?

if($("#calendar").length)
{
    var dates;
    $.post("/dates/jsondates.php",function(data)
    {
     for(var i=0; i<data.length; i++)
     {
      data[i].start = new Date(data[i].start);
      data[i].end = new Date(data[i].end);
     }
     dates = data;
    }, "json");

    $("#calendar").datepicker(
    {
     beforeShowDay: function(date)
     {
      for(var i=0; i<dates.length; i++)
      {
       if(dates[i].start<date<dates[i].end)
       {
        return new Array(0, "booked", dates[i].comment);
       }
      }
      return new Array(1);
     }
    });
}

Answer 1

The problem is that your calendar datepicker code is executing before the AJAX is done processing.

Your datePicker code needs to go inside the $.post callback function, beneath the for loop, and beneath the line dates = data;

Answer 2

Your datepicker code will (potentially) be getting executed before the ajax call completes. At the minimum, try moving the datepicker portion of the code into the $.post callback:-

if ($("#calendar").length)
{
    var dates;
    $.post("/dates/jsondates.php",function(data)
    {
        for(var i=0; i<data.length; i++)
        {
                data[i].start = new Date(data[i].start);
                data[i].end = new Date(data[i].end);
        }
        dates = data;

        $("#calendar").datepicker(
        {
            beforeShowDay: function(date)
            {
                    for(var i=0; i<dates.length; i++)
                    {
                            if(dates[i].start<date<dates[i].end)
                            {
                                    return new Array(0, "booked", dates[i].comment);
                            }
                    }
                    return new Array(1);
            }
        });
    }, "json");

}

Edit: As an aside, and if it was me, I'd probably split it up into some sort of caller function to get the date data and feed it a callback. E.g:-

function __callDateController(callback)
{
    $.post("/dates/jsondates.php",function(data)
    {
        for(var i=0; i<data.length; i++)
        {
            data[i].start = new Date(data[i].start);
            data[i].end = new Date(data[i].end);
        }

        if (callback !== undefined) {
            callback(data);
        }
    }, "json");
}

And then feed it a callback for your date picker to deal with:-

__callDateController(function(dates)
{
    $("#calendar").datepicker(
        {
            beforeShowDay: function(date)
            {
                for(var i=0; i<dates.length; i++)
                {
                    if(dates[i].start<date<dates[i].end)
                    {
                        return new Array(0, "booked", dates[i].comment);
                    }
                }
                return new Array(1);
            }
        });
    });