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);
        }
    });
}

Gavin Gilmour · Accepted Answer · 2009-09-18 16:22:57Z

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);
            }
        });
    });

Josh Stodola · Accepted Answer · 2009-09-18 16:15:52Z

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;

answered Sep 18, 2009 at 16:15

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related