How to prevent users' interaction when waiting for ajax's response?
ajax, jquery
Solution
Use an overlay.
http://jqueryui.com/demos/dialog/#modal
Problem
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?