当我单击表单的提交按钮时,这会调用 startValidateFormParameters()
函数。
在这个函数中,我用 BlockUI 屏蔽了 UI并运行 AJAX 请求以验证表单中的某些信息。
如果表单数据在某种程度上是错误的,AJAX url
返回 403 错误响应,这会触发 AJAX 请求的 error()
调用和 403-具体情况。
如果我在特定于 403 的错误调用中使用 alert()
,UI 将保持阻塞状态(根据需要)。
我想做的是使用 BlockUI 的模态对话框,而不是使用 alert()
对话框,它看起来好多了。
但是,一旦错误代码被调用,错误模式对话框就会弹出并几乎立即消失,因为 AJAX 调用停止并且 UI 被解锁。
如何保持 UI 处于阻塞状态以保持显示错误模式?
相关代码如下:
$(document).ready(function() {
...
$('#modalErrorOK').click(function() {
$.unblockUI();
return false;
});
});
function startValidateFormParameters() {
$.blockUI({
message: '<h1><span style="display:inline-block; vertical-align:middle"><img src="https://example.com/resources/indicator.gif"/></span>\
Validating form parameters...</h1>'
});
validateFormParameters();
}
function validateFormParameters() {
$.ajax({
url: "/validateFormParameters.pl",
type: "POST",
data: ({"formSummary" : JSON.stringify($.foobar.formSummary)}),
dataType: "JSON",
cache: false,
success: function (response){
alert(JSON.stringify(response));
},
error: function (request, status, error) {
if (request.status == 401) {
window.location.replace(document.location.href);
}
else if (request.status == 403) {
$('#modalErrorMsg').replaceWith('<div id="modalErrorMsg">' + request.responseText + '</div>');
$.blockUI({
message: $('#modalError')
});
}
else
alert(request.status + "\n" + request.responseText);
}
});
}
$(document).ajaxStop($.unblockUI);
我有一个 DOM 对象来保存错误对话框:
<div id="modalError" style="display:none; cursor: default">
<h1>Error</h1>
<div id="modalErrorMsg"></div>
<input type="button" id="modalErrorOK" value="OK" />
</div>
最佳答案
我想,删除行:
$(document).ajaxStop($.unblockUI);
当 ajax 完成时将阻止 UI 被解锁,您需要将其替换为:
$(document).ajaxSuccess($.unblockUI);
然后像往常一样在错误回调中正常调用模态对话框。
然后在对话框的OK按钮上添加一个.click()
监听器:
$('#modalErrorOK').click(function() {
$.unblockUI();
return false;
});
您可能还需要调用:
$.unblockUI();
对于您未显示对话框的错误回调的其他部分。
关于javascript - 如何在 $.ajax() error() 上显示 BlockUI 模态对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5673053/