title: Multiple AJAX requests in jQuery
body: <p>I have a function that pulls data from two locations and places the returned content on a modal dialog that is displayed to the user.</p>
  
  <p>Both requests are asynchronous because they're cross-domain. The problem lies in that I don't want to display the modal until both requests have finished loading. How can I check to make sure both requests have finished before loading the modal?</p>
  
  <p>I have tried placing the openModal functions in the success handler of the second request and that works when the first requests finishes loading before the second request, but sometimes this isn't the case.</p>
  
  <p>Here's a copy of my code:</p>
  
  <pre><code>function loadData(id) {
  $.ajax({
      type: 'GET',
      url: 'https://someurl.com/v1.0/controller1/' + id,
      dataType: 'jsonp',
      success: function(data) {
          // Do some stuff to the data
      }
  });
  
  $.ajax({
      type: 'GET',
      url: 'https://someurl.com/v1.0/controller2/' + id,
      dataType: 'jsonp',
      success: function(data) {
          // Do some stuff to the data
  
          openModal();
      }
  });
  }
  
  function openModal() {
  // Open the modal
  }
  </code></pre>