title: jquery ajaxstart ajaxstop show hide
body: <p>As usually seemingly simple things take days to resolve, maybe someone could point me to a solution but after 2 days I give up on the following problem;</p>
  
  <p>In html, in a form I have a button that is supposed to trigger loading of data through ajax call:</p>
  
  <pre><code>&lt;button type="" class="btn" onclick="getData(); return false;"&gt;Show Data&lt;/button&gt;
  </code></pre>
  
  <p>in javascript:</p>
  
  <pre><code>$(document).ajaxStart(function() {
      $("#qloader").show();
  }).ajaxStop(function() {
      $("#qloader").hide('slow');
  });​
  </code></pre>
  
  <p>and in html div with id qloader is defined with 100% width and height and spinner centered as the background, z-index above other:</p>
  
  <pre><code>&lt;div id="qloader" class="myLoader" &gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>Now, when page loads, ajax call is executed to get initial data, qloader div is brought up and it shows the spinner - animated, after ajax call finishes, qloader is hidden by ajaxStop.</p>
  
  <p>Next, when I click on a button (show data) to initiate another ajax call, ajaxStart is triggered, but it does not show qloader, it waits until ajaxStop is triggered and then in a blink of eye it shows qloader and hides it.</p>
  
  <p>I suspected that ajaxStart is not executed, so I put alert before $("#qloader").show(), then alert would be displayed and after that qloader WOULD be displayed BUT spinner animation would be suspended - no spinning, and after ajaxStop it would get hidden.</p>
  
  <p>Without alert in ajaxStart trigger, in subsequent ajax calls div is not shown until just before ajaxStop is triggered.</p>
  
  <p>It works fine for the first ajax call, but for subsequent ajax call triggered by click on form button it does not work.</p>
  
  <p>Any idea what is wrong with this setup?</p>