how to prevent users' interaction when waiting for ajax's response

Question

The scenario is like: I'm using Jquery to implement some ajax features. For example: when a user click a button "get data", Jquery will call .ajax function to fetch some data from the server. This process might take some time, so I added .ajaxSend and .ajaxComplete functions to show some animation for the waiting process (actually a 'Loading Data' gif inside a div with z-index: 999 to be the top of other divs inside the ). During the waiting process (the 'Loading Data'), I would like to prevent users to click other buttons (for example: I have other tabs, buttons below the small 'Loading Data' gif). The way I achieved this is by:

    $("body").ajaxSend(function()
     {
        $(this).append('<div id="loading">Data Loading<\/div>');
        $("div#error").remove();
        $(this).children().not('#loading').css({'opacity':0.22});   
     });
    $("body").ajaxComplete(function()
     {
        $("div#loading").remove();
        $(this).children().not('#loading').css({'opacity':1});
     });

However, I don't think changing the opacity is the best way. Unless you make the opacity to 0, users can still click on other buttons/tabs. I don't know how to totally avoid any user interactions during this process? Thanks!!

Answer 1

Use an overlay.

http://jqueryui.com/demos/dialog/#modal

Answer 2

Make visible a div with a z-index above anything else. onsucess, hide it.

For IE6, consider visibility of select inputs

Answer 3

I've used jQuery Block UI with good success in the past. Works well with Ajax:

http://malsup.com/jquery/block/

May be worth using a plugin such as this, rather than handcoding a similar solution...

Answer 4

See the answers to CSS/JavaScript Use Div to grey out section of page.

Answer 5

I use a variant on Ben Nadel's ajax pipeline. Essentially he wraps the jQuery $.ajax call with an object that can record outgoing ajax requests.

When an ajax request goes out, you record the request name. If any more requests attempt to go out with the same name, you don't execute it (optionally providing a message to the user).