title: Show animation while waiting for external ajax request
body: <p>A JavaScript for GUI manipulation calls JavaScript for data handling. I want to show an animation while waiting for the external ajax-request.
  For example: <code>gui.js</code> has the method <code>showData(id)</code> and <code>data.js</code> has a function <code>getData(id)</code>. Inside <code>showData(id)</code> I call <code>getData(id)</code>. Inside <code>getData</code> is an <code>$ajax</code> for getting data from the database. I want to show an animation while <code>showData(i)</code> waits for <code>getData()</code>.</p>
  
  <p>I have found a lot for making an ajax-request after another ajax-request was successful, but no solution for my problem.</p>
  
  <p>UPDATE:
  Get Details at the moment. Maybe i could return the $.ajax and make it asynchron.</p>
  
  <pre><code>function getData(id) {
  var ajaxResult = $.ajax({
      type : 'POST',
      url : '/ajax/getData.php',
      data : {'id' : id},
      dataType : 'json',
      async: false,
      error : function() {
          console.log("FAILURE on getting" + id);
      }
  });
  return ajaxResult.responseText;}
  </code></pre>
  
  <p>The showData should call getData().</p>
  
  <pre><code>function showDetails(id) {
  $('#ElementInfo').html("");
  var jsonData = getData(); //while that show load
  //hide load animation
  $('#ElementInfo').html(makeHtml(data));}
  </code></pre>