jQuery date picker обновление доступных дат с использованием Ajax

Question

Попытка динамического обновления jQuery Datepicker после изменения поля #tour_region. Я взял этот код из веб-блога Салмана и изменил идентификаторы CSS на мои, а также, очевидно, изменил URL-адрес для вызова Ajax.

Когда я построил ответ JSON, я протестировал его, используя вызов .ajax, но у Салмана был .getJSON.

Ошибка я получаю: «Uncaught TypeError: Не удается прочитать свойство„запись“неопределенных»

заставляет меня думать, может быть, что-то не так с ответом JSON. Я не слишком хорошо знаком с вызовом .getJSON.

Заранее спасибо.

$(document).ready(function(){ 
    $(function() { 
     var dateList = null; 
     var date1 = new Date; 
     date1.setHours(0, 0, 0, 0); 
     date1.setDate(1); 
     var date2 = new Date; 
     date2.setHours(0, 0, 0, 0); 
     date2.setMonth(date2.getMonth() + 12, 0); 
     $("form #date").datepicker({ 
      minDate: date1, 
      maxDate: date2, 
      beforeShowDay: function(date) { 
       var r = [true, ""]; 
       if (dateList === null) { 
        r[1] = "dp-highlight-unknown"; 
       } else { 
        var key = $.datepicker.formatDate("yy-mm-dd", date); 
        if (key in dateList) { 
         r[1] = "dp-highlight-available"; 
         r[2] = dateList[key].join(", "); 
        } 
       } 
       return r; 
      } 
     }); 
     $("#tour_region").on("change", function(){ 
      var region = $(this).val(); 
      $.getJSON("/dates?region=" + region, { 
       "alt": "json", 
       "start-min": $.datepicker.formatDate("yy-mm-dd", date1), 
       "start-max": $.datepicker.formatDate("yy-mm-dd", new Date(date2.getTime() + 86400000)), 
       "orderby": "starttime", 
       "max-results": 100 
      }, function(data) { 
       dateList = {}; 
       $.each(data.feed.entry, function(i, entry) { 
        var key = entry.gd$when[0].startTime.substr(0, 10); 
        if (key in dateList == false) { 
         dateList[key] = []; 
        } 
        dateList[key].push(entry.title.$t); 
       }); 
       $("form #date").datepicker("refresh"); 
      }); 
     }); 
    }); 
}); 

Answer 1

Это позволяет сборщику даты показывать только даты, возвращенные из .getJSON. Всем спасибо.

var dateList = null; 
    $(function() {  
    var date1 = new Date; 
    date1.setHours(0, 0, 0, 0); 
    date1.setDate(1); 

var date2 = new Date; 
date2.setHours(0, 0, 0, 0); 
date2.setMonth(date2.getMonth() + 12, 0); 

$("form #date").datepicker({ 
    minDate: date1, 
    maxDate: date2, 
    beforeShowDay: function(date) {     
     var r = [false, ""]; 
     if (dateList === null) { 
      r[1] = "dp-highlight-unknown"; 
     } else { 
      var key = $.datepicker.formatDate("yy-mm-dd", date);       
      if ($.inArray(key, dateList) != -1) { 
       r[0] = true;        
       r[1] = "dp-highlight-available";        
      } 
     } 
     return r; 
    } 
}); 

$("#tour_region").on("change", function(){ 
    var region = $(this).val(); 
    $.getJSON("/dates?region=" + region, { 
     "alt": "json", 
     "start-min": $.datepicker.formatDate("yy-mm-dd", date1), 
     "start-max": $.datepicker.formatDate("yy-mm-dd", new Date(date2.getTime() + 86400000)), 
     "orderby": "starttime", 
     "max-results": 100 
    }, function(data) { 
     console.log(data); 
     dateList = []; 
     $.each(data, function(i, entry) {    
      if ($.inArray(entry, dateList) == -1) { 
       dateList.push(entry); 
      }    
     }); 
     $("form #date").datepicker("refresh"); 
    }); 
});   
});