title: I am trying to show a Loader before Jquery Ajax call but it does not work
body: <p>I am trying to show a div that containers a loader before an ajax call using the following code.</p>
  
  <pre><code>$(document).ajaxStart(function() {
    $("#div_loader").css("display", "block")
  })
  
  $(document).ajaxComplete(function() {
    $("#div_loader").css("display", "none");
  })
  </code></pre>
  
  <p>But I am only able to see the div when I debug the JS using Chrome developer Tools. But normally, it never shows up.</p>
  
  <p>Div Html</p>
  
  <pre><code>&lt;div class="loader" id='div_loader'&gt;
              &lt;div class="shade"&gt;&lt;/div&gt;
              &lt;div class="popup"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Css for the loader</p>
  
  <pre><code>.loader {
      position: absolute;
      /* height: 100%; */
      max-height: 100%;
      width: 100%;
  }
  
  .shade {
      position: fixed;
      z-index: 9999999999;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: #333;
      opacity: 0.8;
  }
  
  .loader .popup {
      position: fixed;
      height: 102px;
      width: 218px;
      background: url(../images/loader.gif) 50% 85% no-repeat;
      background-size: 32px;
      margin: 12% auto;
      border-radius: 6px;
      top: 10%;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99999999999;
  }
  </code></pre>
  
  <p>And here's the ajax request...</p>
  
  <pre><code>function AjaxPostCall(ServicePath, Input) {
      var data = $.parseJSON($.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: ServicePath,
          data: JSON.stringify({ 'Input': Input }),
          dataType: "json",
          async: false
      }).responseText); // This will wait until you get a response from the ajax request.
      var DataSet = JSON.parse(data.d);
      return DataSet;    
  }
  </code></pre>