How to make days enabled in UI datepicker after month change?

Original question link: Help! How to make days enabled in UI datepicker after month change?

First of all, The solution of Nick Craver is wonderful. But I got another problem:

The Nick Craver's date source was came from the js variable xml, but my date source comes from a xml file. So I got the same date result but the datepicker didn't display right in my way.

Nick Craver's code:

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 );
}

and my want it to be: [didn't work]

var daysWithRecords = [];

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

function 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]);
 }
}

I test via Firebug. It seems the function being called in the order of:

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() 

so, the initDaysArray[] always empty inside checkAvailability()

[My solution]

I found this way to figure it out:

using datepicker's method "refresh" to redraw the datepicker after ajax read the xml file

function getDays(year,month,inst){

    $.ajax({
        type: "GET",
        url: "users.xml",
开发者_Python百科        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);

        }

     });

The problem is that ajax is asynchronous - that means that the rest of your script will be running while the XML file is been loaded. You will need to use ajax to obtain the XML file either right after the page has loaded, or when the datepicker is enabled.

This means that you should put your ajax code outside of everything Nick Craver wrote, since they won't work unless the XML file is loaded.

$.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
    }
});

You should also display a loading indicator before the XML file is loaded to indicate to your users that the control is not ready yet.