title: How to prevent users' interaction when waiting for ajax's response?
body: <p>I'm using jQuery to implement some ajax features. For example: when a user clicks a button &quot;get data&quot;, jQuery will call an ajax function to fetch some data from the server. This process might take some time, so I added <code>.ajaxSend</code> and <code>.ajaxComplete</code> 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 <code>&lt;body&gt;</code>).</p>
  <p>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:</p>
  <pre><code>    $(&quot;body&quot;).ajaxSend(function()
       {
          $(this).append('&lt;div id=&quot;loading&quot;&gt;Data Loading&lt;\/div&gt;');
          $(&quot;div#error&quot;).remove();
          $(this).children().not('#loading').css({'opacity':0.22});   
       });
      $(&quot;body&quot;).ajaxComplete(function()
       {
          $(&quot;div#loading&quot;).remove();
          $(this).children().not('#loading').css({'opacity':1});
       });
  </code></pre>
  <p>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?</p>