将 jQuery UI 日期选择器与异步 AJAX 请求一起使用
Use jQuery UI datepicker with async AJAX requests
我正在尝试在 jquery-ui 日期选择器中启用特定日期。到目前为止,我已经设置了我的 sql 脚本和 json 文件,除了响应时间之外一切正常,因为我已将 async 设置为 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 而响应时间不佳。
谢谢!
你做错了。在您的示例中,该月的每一天都会触发同步 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");
}
});
见similar example here。
我正在尝试在 jquery-ui 日期选择器中启用特定日期。到目前为止,我已经设置了我的 sql 脚本和 json 文件,除了响应时间之外一切正常,因为我已将 async 设置为 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 而响应时间不佳。
谢谢!
你做错了。在您的示例中,该月的每一天都会触发同步 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");
}
});
见similar example here。