jQuery UI Datepicker disabling at AJAX Call

Question

I'm trying to disable an inline datepicker using the .datepicker('disable') method when the onChangeMonthYear callback function is fired.
This function makes an AJAX call (to fetch dates), and enables the datepicker back after success.

Unfortunately, the .datepicker('disable') never occurs ...

Apparently, after some deep digging with Firebug, the internal _disableDatepicker is called, but the class hasDatePicker is never found and thus the function returns early.

I have encapsulate the callback functions in a global object, but this does not seems to affect the behavior of my code.

onChangeMonthYear has a 3rd parameter, inst , that is supposed to refer to the datepicker element. So I am supposed to access it through a $(inst) call.

You will find the complete code on http://jsbin.com/ahano4/6/edit

Answer 1

Here is your getEventsForDate function with some of the code removed.

this.getEventsForDate = function(year, month, inst) {
    ...
    $(inst).datepicker('disable');
    ...
};

And here is your code that runs after the DOM has been loaded

$(function() {
    var date = new Date();
    Calendar.getEventsForDate(date.getFullYear(), date.getMonth()+1, {});
    ...
});

You are passing an empty object {} into the function as the third parameter and then calling the .datepicker() function on it. This clearly will not do anything useful.

Answer 2

Don't you need to call the enable/disable by the actual element you're trying to affect?

$(inst).datepicker('disable');//generic and not referring to anything in the DOM
should be
$('#calendar').datepicker('disable');//referring to the datepicker object in the DIV with the ID 'calendar'