CODEWITHSUNDEEP
jquery
SSS
SSS

Reputation: 1430

jquery datepicker refresh method is not working

I am highlighting some days in a month depending on the data coming from backend . When i cahnge month or year , again am calling ajax call . But datepicker shows only 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;
}

Upvotes: 4

Views: 3329

Answers (3)

Moritz
Moritz

Reputation: 342

Trapped into the same issue, that the datepicker is not refreshed due to external modifications like 'setDate'. My hacky solution is to fake a mouseleave-event

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

Upvotes: 0

algorhythm
algorhythm

Reputation: 8728

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

If not, did you tried to make a refresh-method outside the event-handler and than 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's deprecated
    jQuery(this).datepicker({
        [...]
        onChangeMonthYear: function(year, month) {
            var date = new Date(year, month-1);
            obj.suggestDates(date);
            refreshDatebox(); // call new function
        },
        [...]
    });
});

Upvotes: 0

SSS
SSS

Reputation: 1430

I got to know the problem here . We need to set async:false for ajax call that is 

$.ajax({async:false});

It works fine now.

Upvotes: 3

Related Questions