如何在 $.ajax() error() 上显示 BlockUI 模式对话框？

Question

当我单击表单的提交按钮时，这会调用 startValidateFormParameters() 函数。

在此函数中，我使用 BlockUI 阻止 UI，并运行 AJAX 请求来验证表单中的某些信息。

如果表单数据在某些方面有问题，AJAX url 将返回 403 错误响应，从而触发 AJAX 请求的 error() 调用和 403 特定条件。

如果我在 403 特定错误调用中使用 alert()，UI 将保持阻塞状态（根据需要）。

我想要做的 - 而不是使用 alert() 对话框 - 是使用 BlockUI 的模式对话框，它看起来好多了。

但是，一旦调用错误代码，错误模式对话框就会弹出并几乎立即消失，因为 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>

Answer 1

我认为，删除这一行：

$(document).ajaxStop($.unblockUI);

当 ajax 完成时，将停止 UI 被解锁，您需要将其替换为：

$(document).ajaxSuccess($.unblockUI);

然后在错误回调中像平常一样调用模式对话框。

然后在对话框的“确定”按钮上添加一个 .click() 侦听器：

$('#modalErrorOK').click(function() { 
    $.unblockUI(); 
    return false; 
});

您可能还需要调用：

$.unblockUI();

对于未显示对话框的错误回调的其他部分。