I have the following script that works fine:

  $(function() {
    $( "#datepicker" ).datepicker
(
{
      altField: '#sheetid',
      onSelect: function load() {
        $(document).ready(function() {
                $.ajax({
                type: 'POST',
                url: 'test2.php',
                data: {sheetid: $('#sheetid').val()},
                success: function(data)
                {
                    $("#contentz").html(data);
                }
            });

    });
    },
      firstDay: 1});
}
);

The script loads data in a div based on the selected date from an inline jq datepicker. But I can't seem to succeed on making it work for the default date, when the page first loads. I've tried:

$("#datepicker").load(function() {
$(document).ready(function() {
                    $.ajax({
                    type: 'POST',
                    url: 'test2.php',
                    data: {sheetid: $('#sheetid').val()},
                    success: function(data)
                    {
                        $("#contentz").html(data);
                    }
                });

        }
})

but that doesn't seem to work either. Any suggestions?

I have the following script that works fine:

  $(function() {
    $( "#datepicker" ).datepicker
(
{
      altField: '#sheetid',
      onSelect: function load() {
        $(document).ready(function() {
                $.ajax({
                type: 'POST',
                url: 'test2.php',
                data: {sheetid: $('#sheetid').val()},
                success: function(data)
                {
                    $("#contentz").html(data);
                }
            });

    });
    },
      firstDay: 1});
}
);

The script loads data in a div based on the selected date from an inline jq datepicker. But I can't seem to succeed on making it work for the default date, when the page first loads. I've tried:

$("#datepicker").load(function() {
$(document).ready(function() {
                    $.ajax({
                    type: 'POST',
                    url: 'test2.php',
                    data: {sheetid: $('#sheetid').val()},
                    success: function(data)
                    {
                        $("#contentz").html(data);
                    }
                });

        }
})

but that doesn't seem to work either. Any suggestions?

• javascript
• jquery
• ajax
• datepicker

• 1 of course it doesn't work, you are binding to document.ready event from datepicker.load event... try other way around – Ivan Hušnjak Commented Sep 9, 2013 at 11:41

3 Answers 3

enter image description here

If you want to set date onload use this function.

$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", new Date());

I would do it like this:

$(document).ready(function() {
    $("#datepicker").load(function() {
        $.ajax({
            type: 'POST',
            url: 'test2.php',
            data: {sheetid: $('#sheetid').val()},
            success: function(data)
            {
                $("#contentz").html(data);
            }
        });
    });
});

it makes no sense to bind something to the document.ready event on datepicker.load. You can do what you want directly there.

As far as I see, there is nothing asynchronous here. So just do it consecutively:

$(function() {
    $("#datepicker").datepicker({});
    // your function with ajax call here
    console.log( $("#ui-datepicker-div").length );
});

This effectively logs "1".