title: ajax loading do not working with async:false
body: <p>I'm trying to make loading appear before making a request using ajax and even then the screen is only locked.</p>
  <p>JS:</p>
  <pre><code>function showEstoque(productId) {
      if (url !== '' &amp;&amp; url != '-1') {
          if (active) {
              hideEstoques(active);
          }
          var target = document.getElementById(&quot;productInfo&quot; + productId);
  
          target.innerHTML = generateRows(productId);
          target.style.display = &quot;block&quot;;
          active = productId;
      }
  }
  
  function hideEstoques(productId) {
      document.getElementById(&quot;productInfo&quot; + productId).style.display = &quot;none&quot;;
      active = null;
  }
  
  function generateRows(productId) {
      var rows = '';
      
      rows += generateRowsEstoque(productId);
      rows += generateRowsReserva(productId);
      
      return rows;
  }
  
  function generateRowsEstoque(productId) {
      var textContent = searchE(productId);
      var parse = JSON.parse(textContent);
      
      var data = parse.length ? parse[0].nothing : null;
      
      if (!data)
          return '&lt;span&gt;Nothing&lt;/span&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;Nothing&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
  
      var rows = '&lt;span&gt;Nothing&lt;/span&gt; &lt;table&gt;&lt;thead&gt; &lt;tr&gt; &lt;th&gt;Nothing&lt;/th&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt;';
  
      for(var n=0; n &lt; data.length; n++) {
          rows += '&lt;tr&gt;' +
              '&lt;td&gt;' + data[n].nothing + '&lt;/td&gt;' +
              '&lt;/tr&gt;';
      }
      rows += '&lt;/tbody&gt; &lt;/table&gt;';
      
      return rows;
  }
  
  function searchE(productId) {
      
      var view_data = &quot;[]&quot;;
      jQuery.ajax({
          url: url + &quot;product/&quot; + productId,
          type: &quot;GET&quot;,
          dataType: &quot;text&quot;,
          async: false,
          success: function (response_data) {
              if (response_data == undefined){                
                  view_data=0;
                  return view_data;
              }
              view_data = response_data.replace(/\r\n/g, &quot;&quot;);
          },
          error: function (xhr, textStatus, thrownError){         
              if(xhr.status == 404){              
                  view_data=0;
              }else{               
                   view_data=0;
              }
          }
      });
  
      return view_data;
  }
  
  function generateRowsReserva(productId) {
      
      var textContent = searchEReserva(productId);
      var parse = JSON.parse(textContent);
  
      var data = parse.length ? parse : null;
      
      if (!data)
          return '&lt;table class=&quot;info&quot;&gt;&lt;tr&gt;&lt;td class=&quot;none&quot;&gt;Nothing&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
      
      var foo = data.filter(function(p) { return p.idType === 'foo' });
      var bar = data.filter(function(p) { return p.idType === 'bar' });
      
      var fooQtd = foo.length ? foo[0].nothing : 0;
      var barQtd = bar.length ? bar[0].nothing : 0;
      
      var rows = '&lt;br/&gt;&lt;table class=&quot;info&quot;&gt;&lt;thead&gt; &lt;tr class=&quot;labels&quot;&gt; &lt;th&gt;Nothing&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt;';
      rows += '&lt;tr&gt;' +
          '&lt;td&gt;' + fooQtd + '&lt;/td&gt;' +
          '&lt;td&gt;' + barQtd + '&lt;/td&gt;' +
          '&lt;/tr&gt;';
      rows += '&lt;/tbody&gt; &lt;/table&gt;';
      
      return rows;
  }
  
  function searchEReserva(productId) {
  
      var view_data = &quot;[]&quot;;
      $j.ajax({
          url: &quot;url&quot; + productId,
          type: &quot;GET&quot;,
          dataType: &quot;text&quot;,
          async: false,
          success: function (response_data) {
              if (response_data == undefined){                
                  view_data=0;
                  return view_data;
              }
              view_data = response_data.replace(/\r\n/g, &quot;&quot;);
          },
          error: function (xhr, textStatus, thrownError){         
              if(xhr.status == 404){              
                  view_data=0;
              }else{               
                   view_data=0;
              }
          }
      });
  
      return view_data;
  }
  
  function startLoading(productId) {
  
      var imgEstoqueProduto = document.getElementById(&quot;imgEstoqueProduto&quot; + productId);
      if (imgEstoqueProduto) {
          imgEstoqueProduto.style.display = &quot;&quot;;
      }
  }
  
  function stopLoading(productId) {
      var imgEstoqueProduto = document.getElementById(&quot;imgEstoqueProduto&quot; + productId);
      if (imgEstoqueProduto) {
          imgEstoqueProduto.style.display = &quot;none&quot;;
      }
  }
  
  
  </code></pre>
  <p>HTML:</p>
  <pre><code>
  &lt;td
                          onclick=&quot;showEstoque(1);&quot;&gt;
                          &lt;div id=&quot;estoque_1&quot; class=&quot;estoqueCor st-color_&quot;/&gt;&quot;&gt;1&lt;/div&gt;
  &lt;img id=&quot;imgEstoqueProduto&quot;
                                  style=&quot;vertical-align: middle; display: none;&quot;
                                  src=&quot;&lt;c:url value=&quot;/images/ajaxLoader.gif&quot;/&gt;&quot;&gt;
                          &lt;div class=&quot;container-product-info&quot;&gt;
                              &lt;div onmouseout=&quot;hideEstoques(1);&quot;
                                      class=&quot;productInfo&quot;
                                      id=&quot;productInfo1&quot;&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
  
  
  </code></pre>
  <p>I tried to use the beforeSend, call before the ajax method starts, ajaxStart and even then it doesn't work and the screen just hangs. Could you help me please?
  I called startLoading before everything and it still doesn't work
  I removed async: false but, I need to wait for the data to be returned from the API</p>