Question

我正在尝试将ajax响应放入我的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>

Answer 1

在ajax请求完全完成时初始化datepicker。

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"];
        }
    }

如何在javascsript datepicker函数中获取ajax响应？

1 个答案: