將 jQuery UI 日期選擇器與異步 AJAX 請求一起使用

Question

我正在嘗試在 jquery-ui 日期選擇器中啟用特定日期。 到目前為止，我已經設置了我的 sql 腳本和 json 文件，除了響應時間之外一切正常，因為我已將異步設置為 false。 我的 jquery 代碼是。

var today = new Date();

$("#pickDate").datepicker({
    minDate: today,
    maxDate: today.getMonth() + 1,
    dateFormat: 'dd-mm-yy',
    beforeShowDay: lessonDates,
    onSelect: function(dateText) {
        var selectedDate = $(this).datepicker('getDate').getDay() - 1;
        $("#modal").show();
        $.get("http://localhost/getTime.php", {
            lessonDay: selectedDate,
            lessonId: $("#lesson").val()
        }, function(data) {
            $("#attend-time").html("");
            for (var i = 0; i < data.length; i++) {
                $("#attend-time").append("<option>" + data[i].lessonTime + "</option>");
                $("#modal").hide();
            }
        }, 'json');
    }
});

function lessonDates(date) {
    var day = date.getDay();
    var dayValues = [];
    $.ajax({
        type: "GET",
        url: "http://localhost/getLessonDay.php",
        data: {
            lessonId: $("#lesson").val()
        },
        dataType: "json",
        async: false,
        success: function(data) {
            for (var i = 0; i < data.length; i++) {
                dayValues.push(parseInt(data[i].lessonDay));
            }
        }
    });
    if ($.inArray(day, dayValues) !== -1) {
        return [true];
    } else {
        return [false];
    }
}

誰能幫我嗎？ 我重復上面的代碼工作正常，但由於 async=false 而響應時間不好。

謝謝！

Answer 1

你做錯了一切。 在您的示例中，該月的每一天都會觸發一個同步AJAX請求。 您需要這樣重構代碼（粗略的概述）：

// global variable, accessible inside both callbacks
var dayValues = [];

$("#pickDate").datepicker({
  beforeShowDay: function(date) {
    // check array and return false/true
    return [$.inArray(day, dayValues) >= 0 ? true : false, ""];
  }
});

// perhaps call the following block whenever #lesson changes
$.ajax({
  type: "GET",
  url: "http://localhost/getLessonDay.php",
  async: true,
  success: function(data) {
    // first populate the array
    for (var i = 0; i < data.length; i++) {
      dayValues.push(parseInt(data[i].lessonDay));
    }
    // tell the datepicker to draw itself again
    // the beforeShowDay function is called during the processs
    // where it will fetch dates from the updated array
    $("#pickDate").datepicker("refresh");
  }
});

在這里看到類似的例子 。

Answer 2

$.when(getdates()).done(function(){
            //this code is executed when all ajax calls are done => the getdates() for example
            $('#res_date').datepicker({
                startDate: '-0m',
                format: 'dd/mm/yyyy',
                todayHighlight:'TRUE',
                autoclose: true,
                datesDisabled: unavailableDates,
            });

        });

        function getdates(){
            return $.ajax({
                        type:'GET',
                        url:'/available_dates',
                        success:function(response){
                            for(let i = 0; i < response.data.length; i++){
                                unavailableDates.push(response.data[i]);
                            }
                            console.log(unavailableDates);
                            return unavailableDates;
                        },
                        
                    });            
        }