How to show BlockUI modal dialog on $.ajax() error()?

When I click a form's submit button, this calls the startValidateFormParameters() function.

In this function, I block the UI with BlockUI and run an AJAX request that validates some information in the form.

If the form data is bad in a certain way, the AJAX url returns a 403 error response, which fires the AJAX request's error() call and the 403-specific condition.

If I use alert() within the 403-specific error call, the UI remains blocked (as desired).

What I would like to do — instead of using an alert() dialog — is use BlockUI's modal dialog, which looks a lot nicer.

However, once the error code is called, the error modal dialog pops up and disappears almost immediately, as the AJAX call stops and the UI is unblocked.

How do I keep the UI blocked so that the error modal remains displayed?

Here is the relevant code:

$(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);

I have a DOM object to hold the error dialog:

<div id="modalError" style="display:none; cursor: default">
    <h1>Error</h1>
    <div id="modalErrorMsg"></div>
    <input开发者_JS百科 type="button" id="modalErrorOK" value="OK" />
</div>

I would think, removing the line:

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

Will stop the UI being unblocked when the ajax finishes, you will need to replace it with:

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

Then call the modal dialog as normal in the error callback as you are doing.

Then add a .click() listener the OK button of the dialog:

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

You may also need to call:

$.unblockUI();

For the other parts of the error callback where you are not showing the dialog.