如何在月更改后的UI datepicker中启用日期？

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

原始问题链接：帮助！如何在月更改后的UI datepicker中启用日期？

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

首先，Nick Craver的解决方案很精彩。但是我遇到了另一个问题：

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的日期源来自js变量xml，但我的日期源来自xml文件。所以我得到了相同的日期结果，但是datepicker没有按照我的方式显示。

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（）：

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:

我通过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()

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

所以，initDaysArray []在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

在ajax读取xml文件后，使用datepicker的方法“refresh”重绘datepicker

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

        }

     });

1 个解决方案

#1

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.

问题是ajax是异步的 - 这意味着在加载XML文件时，脚本的其余部分将运行。您需要使用ajax在页面加载后立即获取XML文件，或者启用datepicker。

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代码放在Nick Craver编写的所有内容之外，因为除非加载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
    }
});

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.

您还应该在加载XML文件之前显示加载指示符，以向您的用户指示控件尚未就绪。

#1