如何獲得ajax響應到javascsript datepicker函數中？

我試圖讓我的datepicker函數的ajax響應。如何獲得ajax響應到javascsript datepicker函數中？

我的getdates.php腳本查詢一個mysql數據庫，然後回顯一系列我希望datepicker禁用的日期。它以這種格式迴應它們：[「3-14-2016」]括號和全部。

我認爲ajax響應會進入disableddates var，但它不會像它應該那樣禁用該日期。

任何想法非常感謝。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<script> 
//ajax call to getdates.php, gets all dates that are full (3 or more books on one day) for that particular category 
function showUser(str) { 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
    console.log(xmlhttp.responseText); 
    disableddates = xmlhttp.responseText; 


    $("#datepicker").datepicker({ 
     beforeShowDay: DisableSpecificDates, 
     minDate: 1, //disable today or earlier 
     maxDate: 63 //show up to 63 days 
    }); 

      } 
     }; 
     xmlhttp.open("GET","getdates.php?q="+str,true); 
     xmlhttp.send(); 
    } 
} 
</script> 

<script> 
//var disableddates = ["3-14-2016"];//hardcoded like this and it works. this date is disabled. but the same string coming from getdates.php doesn't work. ?? 
function DisableSpecificDates(date) { 
var m = date.getMonth(); 
var d = date.getDate(); 
var y = date.getFullYear(); 
// First convert the date in to the mm-dd-yyyy format. note: Jan=0, so add 1 to m! 
var currentdate = (m + 1) + '-' + d + '-' + y ; 
// check if the date belongs to disableddates array 
for (var i = 0; i < disableddates.length; i++) { 
// check if the current date is in disabled dates array. 
if ($.inArray(currentdate, disableddates) != -1) { 
    return [false,"notFreeDay"];//set css classes so can style dates 
    } 
    else { return [true,"freeDay"]; 
    } 
} 
} 
</script> 

</head> 
<body> 
<form> 
<select id='categories' onchange="showUser(this.value)" name="category[]"> 
<option value="">---</option> 
<option value="1">cat1</option> 
<option value="2">cat2</option> 
<option value="3">cat3</option> 
<option value="4">cat4</option> 
</select> 
</form> 

<!--dates to be disabled in datepicker, from ajax mysql query at getdates.php, goes into this div--> 
<div id="txtHint"></div> 

<input id="datepicker" type="text"> 

</body> 
</html>

來源

2016-03-06 Maude Rozencrance' s Cat

當ajax請求完全完成時，初始化日期選擇器。

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    //document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 

    console.log(xmlhttp.responseText); 
    disableddates = JSON.parse(xmlhttp.responseText); 

    $("#datepicker").datepicker({ 
     beforeShowDay: DisableSpecificDates, 
     minDate: 1, //disable today or earlier 
     maxDate: 63 //show up to 63 days, 
     dateFormat: 'mm-dd-yyyy' 
    }); 

    } 
};

而你不需要循環這裏;

function DisableSpecificDates(date) { 
     var m = date.getMonth(); 
     var d = date.getDate(); 
     var y = date.getFullYear(); 
     var currentdate = (m + 1) + '-' + d + '-' + y; 

     if ($.inArray(currentdate, disableddates) != -1) { 
      return [false, "notFreeDay"]; 
     } 
     else { 
      return [true, "freeDay"]; 
     } 
    }

來源

2016-03-06 11:24:29 irfan

你讓我靠得更近，但我仍然無法讓它工作。 '底部附近的'.inArray（currentdate，disableddates）！= -1'位應該返回false並觸發一個禁用的日期，但不是愛。我用你的建議更新了上面的腳本。 –

我們應該將結果解析爲JSON：'disableddates = JSON.parse（xmlhttp.responseText）;' – irfan

並在腳本塊頂部添加'var disableddates;'以全局定義它。 – irfan

如何獲得ajax響應到javascsript datepicker函數中？

回答

相關問題