Как сделать дни включенными в пользовательском интерфейсе DatePicker после изменения месяца?

Question

Оригинальная ссылка на вопрос: Помощь! Как включить дни в пользовательском интерфейсе DatePicker после изменения месяца?

Прежде всего, решение Ника Крейвера прекрасно. Но у меня есть другая проблема:

Источник даты Ника Крэйвера был получен из переменной js xml, но мой источник даты взят из xml-файла. Таким образом, я получил тот же результат с датой, но средство выбора даты отображалось неправильно.

Код Ника Крейвера:

var xml = '<?xml version="1.0" encoding="utf-8"?><users><user id="126"><name>john</name><watchHistory><whMonthRecords month="2010-10"><whDateList month="2010-10"><date>01</date><date>05</date><date>21</date></whDateList></whMonthRecords><whMonthRecords month="2010-11"><whDateList month="2010-11"><date>01</date><date>05</date><date>06</date><date>07</date><date>08</date><date>09</date><date>12</date><date>13</date><date>14</date><date>16</date><date>18</date><date>19</date><date>21</date><date>22</date><date>23</date><date>24</date><date>25</date><date>26</date><date>29</date></whDateList></whMonthRecords></watchHistory></user></users>';

var daysWithRecords = [];

function getDays(year,month){
  initDaysArray( $(xml) , year ,  month );
}

и я хочу, чтобы это было: [не работало]

var daysWithRecords = [];

function getDays(year,month){
 $.ajax({
  type: "GET",
  url: "users.xml",
  dataType: "xml",
  success:function(data){ 
                initDaysArray($(data) , year ,  month );
            }
  });

функция initDaysArray():

function initDaysArray( $xml , year , month ){
 var dateToFind = year+'-'+month;

 daysWithRecords = $xml.find('user[id="126"] whDateList[month="'+dateToFind+'"] date').map(function() {
  return dateToFind +"-"+ $(this).text();
    }).get();

 for(i = 0; i < daysWithRecords.length; i++){
        console.log(daysWithRecords[i]);
 }
}

Я тестирую через Firebug. Кажется, функция вызывается в следующем порядке:

first call:   getDays()  // being called from onChangeMonthYear
second call:  checkAvailability()  //  being called from beforeShowDay
third call:   ajax inside getDays() // being called inside getDays()
final call:   initDaysArray()  // being called inside ajax success of getDays() 

так, initDaysArray[] всегда пусто внутри checkAvailability()

[Мое решение]

Я нашел способ понять это:

с использованием datepicker's method "refresh" для перерисовки DatePicker после прочтения AJAX XML-файла

function getDays(year,month,inst){

    $.ajax({
        type: "GET",
        url: "users.xml",
        dataType: "xml",
        cache: false,
        success:function(data){

            console.log('reading xml file success!');
           initDaysArray( $(data) , year ,  month );

           //inst.id get the div which attached with datepicker and redraw
           $('#'+inst.id).datepicker('refresh');  
           console.log(inst.id);

        }

     });

Answer 1

Проблема в том, что ajax асинхронный - это означает, что остальная часть вашего скрипта будет работать, пока загружается файл XML.Вам нужно будет использовать ajax для получения файла XML либо сразу после загрузки страницы, либо при включенном указателе даты.

Это означает, что вы должны поместить свой ajax-код вне всего, что написал Ник Крейвер, так как они не будут работать, если файл XML не загружен.

$.ajax({
    type: "GET",
    url: "users.xml",
    dataType: "xml",
    success: function(xml) {
        // All of Nick Craver's code here, 
        // including the initialisation code for the datepicker
    }
});

Вы также должны отобразить индикатор загрузки перед загрузкой файла XML, чтобы указать пользователям, что элемент управления еще не готов.