title: Jquery callbacks with several ajax calls
body: <p>I have several functions where I'm filling a dropdown based on a list from an ajax call :</p>
  
  <pre><code>function getMissions(defaultId) {
      $.getJSON("Defaults/GetMissions", function (result) {
          var dropDownToFill = $('#change-mission');
          fillUpdateDropDown(dropDownToFill, result);
      });
  }
  function getSectors(defaultId) {
      $.getJSON("Defaults/GetSectors", function (result) {
          var dropDownToFill = $('#change-sector');
          fillUpdateDropDown(dropDownToFill, result);
      });
  }
  </code></pre>
  
  <p>Now, after dropdown have been filled, I want to select a specific item, but to get this item, I need an other ajax like :</p>
  
  <pre><code>function getDefaultDetails(defaultId) {
     $.ajax({
          type: "GET",
          url: "/Defaults/GetDefault",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          data: { defaultId: defaultId },
          success: function (response) {
              //code here to select the items from the response
          },
      });
  }
  </code></pre>
  
  <p>and the main function would basically be :</p>
  
  <pre><code>function main(defaultId){
      getMissions(defaultId);
      getSectors(defaultId);
      getDefaultDetails(defaultId);
  }
  </code></pre>
  
  <p>The trouble is that the <code>success</code> callback of <code>getDefaultDetails</code> is reached before <code>fillUpdateDropDown</code> has been finished (dropdowns could have a lot of items).</p>
  
  <p>I'm trying to understand the callbacks but in my case i cannot achieve my problem. I have tried something like :</p>
  
  <pre><code> $.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));
  </code></pre>
  
  <p>but without success.</p>
  
  <p>How to perform that?</p>
  
  <p>Thanks.</p>