Comment rendre les jours activés dans l'interface utilisateur datepicker après un changement de mois?

Question

lien question d'origine: Help! How to make days enabled in UI datepicker after month change?

Tout d'abord, la solution de Nick Craver est merveilleux. Mais j'ai un autre problème:

La source de date de Nick Craver provenait de la variable js xml, mais ma source date provient d'un fichier xml. J'ai donc obtenu le même résultat de date mais le piqueur de date ne s'affichait pas correctement sur mon chemin.

Code Nick Craver:

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

et mon veux que ce soit: [ne fonctionne pas]

var daysWithRecords = []; 

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

fonction

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. Il semble que la fonction appelée dans l'ordre de:

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

donc, le initDaysArray[]toujours vide à l'intérieur checkAvailability()

[Ma solution]

J'ai trouvé cette façon de le comprendre :

en utilisant datepicker's method "refresh" pour redessiner le fichier datepicker après ajax lire le fichier 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

Le problème est que ajax est asynchrone - cela signifie que le reste de votre script en cours d'exécution tandis que le fichier XML est chargé. Vous devrez utiliser ajax pour obtenir le fichier XML soit juste après le chargement de la page, soit lorsque le programme datepicker est activé. Cela signifie que vous devriez mettre votre code ajax en dehors de tout ce que Nick Craver a écrit, car ils ne fonctionneront pas à moins que le fichier XML ne soit chargé.

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

Vous devez également afficher un indicateur de chargement avant que le fichier XML est chargé d'indiquer à vos utilisateurs que le contrôle n'est pas encore prêt.