ajax正在运行时显示进度条或微调器
问题描述:
当我正在运行ajax时试图添加进度条或微调器,但进度条和微调控件只会出现在与来自ajax的成功警报同时出现。ajax正在运行时显示进度条或微调器
注意:我正在使用JSP,并且使用ajax通过servlet更新数据库数据。进度条正在使用引导程序。
$('#sync').click(function() {
var start = $('#startdate').val();
var end = $('#enddate').val();
if ((start !== "") && (end !== "")) {
var startDate = new Date(start);
var endDate = new Date(end);
$('#cover').show();
$.ajax({
type: "post",
url: "PRSync",
data: "start=" + startDate.yyyymmdd() +
"&end=" + endDate.yyyymmdd(),
async: false,
beforeSend: function() {
},
success: function (data) {
var arr = data.split('|');
if (arr[0] === "0") {
alert("Sync fail");
} else {
alert("Sync Succesfull. Total rows of " + arr[1] + " affected.");
}
},
error: function (jqXHR, textStatus, errorThrown, err4) { // if error occured
alert(jqXHR + " _ " + textStatus + " _ " + errorThrown + " _ " + err4);
},
complete: function() {
$('#cover').fadeOut(1000);
}
});
}
});
$(document).ajaxStart(function() {
// show loader on start
showbusy();
}).ajaxSuccess(function() {
// hide loader on success
hidebusy();
});
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding
};
var myApp;
myApp = myApp || (function() {
var pleaseWaitDiv = $('<div class="modal fade" style=top:40% id="pleaseWaitDialog" data-backdrop="false" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Synchronizing is processing</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div></div></div>');
return {
showPleaseWait: function() {
pleaseWaitDiv.modal();
},
hidePleaseWait: function() {
pleaseWaitDiv.modal('hide');
},
};
})();
function showbusy() {
myApp.showPleaseWait();
}
function hidebusy() {
myApp.hidePleaseWait();
}
答
你有没有尝试过这样的:
$(document).bind("ajaxStart", function(){
showbusy(); })
.bind("ajaxStop", function(){
hidebusy();
});
显然,如果你的Ajax调用处理速度非常快,它似乎是你的功能被触发“晚”,但由事件结合$(document)
你要确保它们没有被触发一次。
如果仍然不适合您的需求,我会放在功能Ajax调用内:
$.ajax({
beforeSend: showbusy(),
complete: hidebusy()
});
为什么'异步:FALSE'? –
这是一个很好的博客,可以帮助你。 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ – Dorvalla
你可以假设,如果开始和结束都不是空AJAX将开始?那么,为什么你不把这个陈述附加到你的DOM中,并在成功时再次隐藏它呢? –