title: Show/hide not working during AJAX request
body: <p>I have a function that requests data using ajax. I would like to display a busy spinner but hide/show do not change the elements visibility. </p>
  
  <pre><code>function RequestDataFromServer(stuff, url) {
      var result;
  
      $.ajax({
          url: url,
          data: { stuff: Stuff},
          async: false,
          beforeSend: function () {
              $("#divOverlay").show();
              console.log("Starting...");
          },
          complete: function () {
              $("#divOverlay").hide();
              console.log("Complete!");
              result = true;
          },
          success: function (data) {
              AddDataToCache(data);
          },
          error: function (xhr, ajaxOptions, thrownError) {
              result = false;
          }
      });
  
      return result;
  }
  </code></pre>
  
  <p>I know the show/hide syntax is correct because it works when I attach it to buttons. I have also tried using :</p>
  
  <pre><code>$(document).ajaxStart(function(){
      $("#divOverlay").show();
  }) 
  </code></pre>
  
  <p>With no affect (however if I step thru this event in Chrome it does show and hide the elements). I've also tried show/hide in a function that calls the RequestDataFromServer function... still nothing. I'm out of ideas.</p>