Как получить ответ ajax в функцию datepicker javascsript?

Question

Как получить ответ ajax в функцию datepicker javascsript?

Я пытаюсь получить ответ Ajax в мою функцию выбора даты.

Мой скрипт getdates.php запрашивает базу данных mysql, а затем выводит серию дат, которые я хочу отключить с помощью datepicker. Он повторяет их в следующем формате: [«3-14-2016»] со скобками и все.

Я думаю, что ответ ajax входит в var disableddates, но он не отключает эту дату, как положено.

любые мысли очень ценятся.

<!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>

0

ajax jquery jquery-ui-datepicker mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

инициализировать указатель даты, когда запрос 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"];
}
}

0