Menu
I'm using jQuery to implement some ajax features. For example: when a user clicks a button "get data", jQuery will call an 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 <body>).
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?
984
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...
191
Use an overlay.
http://jqueryui.com/demos/dialog/#modal
27
Make visible a div with a z-index above anything else. onsucess, hide it.
For IE6, consider visibility of select inputs
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
