如何從Ajax響應中重新填充jquery UI日期選擇器

Question

我一直使用this question作爲關聯事件與jQuery UI Datepicker的指南。

我有我的日期和事件突出顯示當前月份工作正常。我的問題是我怎麼能刷新基於進一步Ajax調用新的事件（如存儲在SpektrixApp.events一組新的日曆上的社交活動），日曆（見onChangeMonthYear在下面的代碼）

SpektrixApp = {}; 

(function($) { 

    $.post(
     // see tip #1 for how we declare global javascript variables 
     SpektrixAjax.ajaxurl, 
     { 
      // here we declare the parameters to send along with the request 
      // this means the following action hooks will be fired: 
      // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events 
      action : 'spektrix_get_events', 

      // other parameters can be added along with "action" 
      monthId : 9 
     }, 
     function(response) { 
      SpektrixApp.events = response; 
      //console.log(events[1]); 
      $("#spektrix-event-calendar").datepicker({ 

       beforeShowDay: function(date) { 

        var result = [true, '', null]; 
        var matching = $.grep(SpektrixApp.events, function(event) { 
         //console.log(new Date(event.Date).valueOf()); 
         dateToHighlight = new Date(event.Date).valueOf(); 
         return dateToHighlight === date.valueOf(); 
        }); 

        if (matching.length) { 
         result = [true, 'highlight', null]; 
        } 

        return result; 
       }, 

       onSelect: function(dateText) { 

        $('#spektrix-dialog').empty(); //empty the target div 
        var date, 
         selectedDate = new Date(dateText), 
         i = 0, 
         event = null; 
         daysEvents = []; 

        /* Determine if the user clicked an event: */ 
        while (i < events.length && !event) { 
         //console.log(events[i].Date); 
         date = new Date(SpektrixApp.events[i].Date); 

         if (selectedDate.valueOf() === date.valueOf()) { 
          event = SpektrixApp.events[i]; 
          daysEvents.push(event); 
         } 
         i++; 
        } 
        if (daysEvents) { 
         for(i = 0; i < daysEvents.length; i++) { 
         /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ 
         var day = new Date(event.Date).getDate().toString(); 
         $('#spektrix-dialog').append('<div><a href="/whats-on/'+slugify(event.Title)+'">'+event.Title+'</a></div>'); 

        } 

        } 
       }, 

       onChangeMonthYear: function(year, month,instance) { 
        jQuery.post(
         // see tip #1 for how we declare global javascript variables 
         SpektrixAjax.ajaxurl, 
         { 
          // here we declare the parameters to send along with the request 
          // this means the following action hooks will be fired: 
          // wp_ajax_nopriv_spektrix_get_events and wp_ajax_spektrix_get_events 
          action : 'spektrix_get_events', 

          // other parameters can be added along with "action" 
          monthId : month 
         }, 
         function(response) { 
          SpektrixApp.events = response; 
          $("#spektrix-event-calendar").datepicker("refresh"); 

         } 
        ); 
       } 

      }); 

      //console.log(events); 
     } 
    ); 



})(jQuery); 

function slugify(input) 
{ 
    return input.replace(/\s+/g, '-').toLowerCase(); 
} 

Answer 1

你由於在onChangeMonthYear事件處理程序中使用ajax請求，代碼不起作用。 beforeShowDay之前調用SpektrixApp.events將在onChangeMonthYear中更改。爲了解決問題，你可以改變jQuery.post到jQuery.ajax並添加選項

async : false 

在onChangeMonthYear事件處理您的Ajax請求的聲明。

請看這個例子jsFiddle

Answer 2

如預期的在你的代碼是什麼不起作用？

的.datepicker("refresh")方法應該工作：這裏是一個簡單的例子，具有延遲更新

var highlight = 3; 
$('#date').datepicker({ 
    beforeShowDay: function(date){ 
     // highlight days matching the "highlight" weekday : 
     var res = [true, "", ""]; 

     if (date.getDay() == highlight) { 
      res = [true, "ui-state-hover", "tip"]; 
     } 

     return res; 
    }, 
    onChangeMonthYear: function(){ 
     // delayed update : change the "highlight" weekday and trigger refresh 
     setTimeout(function(){ 
      highlight += 1; 
      highlight = highlight % 7; 
      $('#date').datepicker('refresh'); 
     }, 1000); 
    } 
}); 

fiddle