jquery datepicker pass variable from one function to another

Question

i'm trying to pass the data i got from the function initiated by onChangeMonthYear to the function initiated by beforeShowDay. I tried various methods, like assigning the data I got from test.php to a variable declared at the outside but to no avail. so what i did was just update a text field with the retrieved data from test.php, and asks the function in beforeShowDay to get the data from there. here's a portion of my code

$(document).ready(function() {

    $('#datepicker').datepicker({dateFormat: 'dd-mm-yy', currentText: 'Now', changeMonth: true, changeYear: true, altField: '#alternate', altFormat: 'DD, d MM, yy', onSelect:  function(dateText, inst) {}, 
        onChangeMonthYear: function(year,month,inst){
            $.post("test.php", {action: "TEST", month: month, year: year}, 
            function (data){
                $("#datafromphp").val(data);
            }
            ,"html");
        }, 
        beforeShowDay: function (date){
            var getdatafromphp= $("#datafromphp").val();

        }
    });
});

surely there's a better way to do this?

You said you tried to assign the data "to a variable declared at the outside but to no avail" - what happened when you tried to do that? — frostmatthew, Sep 05 '11 at 01:37
function in beforeShowDay don't get i - it's empty. at least that's what's the function thinks — imin, Sep 05 '11 at 01:42

William Niu · Accepted Answer · 2011-09-05T09:08:18.553

If I understand you correctly, you want to grab some data via AJAX asynchronously in onChangeMonthYear and make it accessible in beforeShowDay in order to display the updated data.

It helps to understand the order of the calls. When the calendar first appears, a bunch of calls are made to beforeShowDay. At this stage, there is no data from your AJAX call yet (i.e. from test.php).

Once the user changes the month/year, onChangeMonthYear will be called, and a bunch of calls are then made to beforeShowDay again. At this stage, there should still be no data from your AJAX call, unless the AJAX call to test.php manages to return quickly enough for some of the calls to beforeShowDay to access the returned value.

Then the AJAX call returns and the returned data is somehow passed to beforeShowDay to display.

As you can see, what you tried to do would not work, as the AJAX call would not be on time for beforeShowDay to grab the data even if you "pass" it correctly. What you want to do is, assign the returned data from AJAX somewhere, and then refresh the datepicker, so beforeShowDay would be called again. You can store data to an arbitrary jQuery object with .data(). So, you can do something like this:

$('#datepicker').data('datafromphp', []).datepicker({dateFormat: 'dd-mm-yy', currentText: 'Now', changeMonth: true, changeYear: true, altField: '#alternate', altFormat: 'DD, d MM, yy', onSelect:  function(dateText, inst) {}, 
    onChangeMonthYear: function(year,month,inst){
        $.post("test.php", {action: "TEST", month: month, year: year}, 
        function (data){
            $("#datepicker").data('datafromphp', data).datepicker('refresh');
        }
        ,"html");
    }, 
    beforeShowDay: function (date){
        var getdatafromphp= $(this).data("datafromphp");

    }
});

thanks for the explanation william; btw i made changes to my code, and now the php calls returns a json encoded data (array), and it seems that by doing `var getdatafromphp= $(this).data("datafromphp");` it doesn't treat the received data as array.. — imin, Sep 05 '11 at 08:47
i made changes to my code, and now the php calls returns a json encoded data (array), and it seems that by doing `var getdatafromphp= $(this).data("datafromphp");` it doesn't treat the received data as array.. i get this conclusion because if I do `alert(data.length)` inside the onChangeMonthYear function, it will return the length of the array, but if i put `alert(getdatafromphp.length)` it will return an error (getdatafromphp is undefined) — imin, Sep 05 '11 at 08:54
That's because `beforeShowDay` would be called first, before `$(this).data("datafromphp")` is set. If you want to avoid that, just initiate the data to an empty array. See updated answer... — William Niu, Sep 05 '11 at 09:07

jquery datepicker pass variable from one function to another

1 Answers1