如何在jQuery-UI Datepicker中重新加载数据？

Question

Here is situation:

I have JQuery-UI datepicker with passed data from a jquery ajax request.

$(document).ready(function() {

$.ajax({
  url: "load-calendar",
  dataType: "json",
  success: function(calendarEvents){

         $("#calendar_1").datepicker({
            beforeShowDay: function(date) {
               var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
               for (i = 0; i < calendarEvents.length; i++) {
                   if($.inArray(y + '-' + (m+1) + '-' + d,calendarEvents) != -1) {
                       return [true, 'ui-state-busy', false];
                   }
               }
               return [true];

           }

          });
  }
});

});

It works fine, and I can see calendar with highlighted busy days.

Now I would like to autorefresh this calendar (every minute), so that user could automatically see new highlighted days. Is this possible?

I have tried using setInterval function, but with no success.

So any experiences/ideas are welcome. Thanks in advance.

Answer 1

If your ajax response is fast enough, you could make that call in the beforeShow event of the datepicker:

$('#calendar_1').datepicker({
   beforeShow: function(input, inst) { //code to update calandar events here// }
});

If using datepicker inline:

function refreshDatePicker(){
    //your ajax call here
}

$(function(){
   // Document is ready
   setInterval ( "refreshDatePicker()", 1000 );
 });

Answer 2

I have solved this problem:

<div id="show_calendars"></div>

$(document).ready(function() {

   var update = function(){
        $('#show_calendars')
             .load('/reload-calendars')
             .fadeIn("slow");
   };
   var auto_refresh = setInterval(function(){update();}, 10000);
   update();

});

Function reload-calendars :

<div id="calendar_1"></div>

$(document).ready(function() {

var busyDays = [<? echo $data;?>];
var date = new Date();

 $( "#calendar_1").datepicker({
     dateFormat: 'yy-mm-dd',
     beforeShowDay: function(date) {
         var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
         for (i = 0; i < busyDays.length; i++) {
             if($.inArray(y + '-' + (m+1) + '-' + d,busyDays) != -1) {
                 return [true, 'ui-state-busy', false];
             }
         }
         return [true];
     }

 });

});