Jqery datepicker update method not working

Question

I allocate a few days a month depending on the data coming from the backend. When I cgenge a month or a year, again I call an ajax call. But datepicker only shows previous dates. My code is as follows:

$("input.dC").live('click',function() { $(this).datepicker({ showOn:'focus', changeMonth:'true', changeYear:'true', onChangeMonthYear:function(year,month,inst) { var date = new Date(year,month-1); obj.suggestDates(date); $("#"+inst.id).datepicker("refresh"); }, beforeShowDay:function(date){ for(i=0;i<obj.r.length;i++) { var m = obj.r[i]; if(date.getMonth() == m[1] && date.getDate() == m[0] && date.getFullYear() == m[2]) { return[true,"ui-state-highlight"];} } return[false,""]; } }).focus(); }); obj.prototype.suggestDates=function(d){ //ajax call here //obj.r=response; } 

Answer 1

I met the problem here. We need to set async: false to call ajax i.e.

 $.ajax({async:false}); 

Now it works great.

Answer 2

Maybe this link is useful: https://github.com/jtsage/jquery-mobile-datebox/issues/231

If not, have you tried to create a refresh method outside the event handler and call it inside?

Something like that:

 // I everytime build first a getter für my jQuery-Element. So you can change your selector with changing only one method var getDatebox = function() { return jQuery('input.dC'); }; var refreshDatebox = function() { getDatebox().datebox('refresh'); }; getDatebox().on('click', function() { // don't use 'live', it deprecated jQuery(this).datepicker({ [...] onChangeMonthYear: function(year, month) { var date = new Date(year, month-1); obj.suggestDates(date); refreshDatebox(); // call new function }, [...] }); }); 

Answer 3

Caught the same thing that the date picker is not updated due to external modifications such as 'setDate'. My hacking solution is to fake mouseleave event

 $('.hasDatepicker').find('.ui-datepicker-calendar').trigger('mouseleave')