Question

I have a page where the user can update a form by clicking on the name of an entity. Think of a list of names, and the form with all the other fields (address, age, gender, etc.) updating with AJAX from the onClick. How do create a modal dialog ("Please wait.") that prevents user interaction until the AJAX call has returned data? I don’t want the user to be able to click an X or Close button. They must wait!

Answer 1

Have a look at the BlockUI plugin.

It allows blocking interaction with the page or a specific element by adding an overlay on top of the page or that element. You can define a message and comes with a bunch of options to customize the look&feel.

You can for instance block a page when an ajax request is performed with:

$(document).ajaxStart(function() {
    $.blockUI({
        message: '<h1>Just a moment...</h1>'
    });
}

$(document).ajaxStop(function() { $.unblockUI(); }