title: perform code once all ajax requests are completed
body: <p>I've got quite a complex search which utilises multiple ajax calls, the flow is as follows:</p>
  
  <pre><code>user performs search on button click
  ajax request is made to php page which returns json data
      for each result in returned data additional ajax request is made
          run function which makes additional ajax call
      end for each
  end click function
  </code></pre>
  
  <p>this all works nicely, what i would like to do is display a loading message in a div and disable the search button, then when all the ajax requests have completed re-enable the button and remove the loading message.</p>
  
  <p>my script is below, at the moment the disable/renable of the button is happening almost instantaneously, i presume because the ajax calls are asyncronus, how do i go about renabling the button and removing the loading message once all the ajax requests have completed and displayed the data??</p>
  
  <pre><code>$('#advKeyBtn').live('click', function() {
          $('#advKeyBtn').attr('disabled', 'disabled');
          $('#searchStatus').html('&lt;img src="../img/icons/loadinfo.gif" width="16" height="16" /&gt; Searching Locations...');
          $('#results').html(''); //clear existing contents
          $('#borough_links').html(''); //clear existing contents
          // handler for advance search button
          var myUrl = 'getKeyBoroughs.php';
          var myKeys = $('#keywords').val();
          var myType = $('input[name=keyParams]:checked').val()       
          $.ajax({
              url: myUrl,
              data: "keys=" + myKeys +'&amp;type='+myType,
              type: "POST",
              traditional: false,
              dataType: 'json',
              error: function(xhr, statusText, errorThrown){
                  // Work out what the error was and display the appropriate message
              },
              success: function(myData){
                  // data retrived ok
                  $.each(myData.boroughs, function( intIndex, objValue ){
                      //alert(myData.boroughs[intIndex].Borough_ID);
                      makeCSS(myData.boroughs[intIndex].Borough_ID);
  
  
      getKeyLocations(myData.boroughs[intIndex].Borough_ID)
                      })
                      //$('#'+divId).append(myData)//construct location holders
                  }
              });
              $('#advKeyBtn').attr('disabled', '');
              $('#searchStatus').html('Search Complete, click on an area to view locations');
          });
  </code></pre>
  
  <p>and the function that gets called from the initial success of the main ajax call</p>
  
  <pre><code>function getKeyLocations(id){
                      var myUrl = 'getKeyLocations.php';
                      var myBorough = id;
                      var myKeys = $('#keywords').val();
                      var myType = $('input[name=keyParams]:checked').val()   
                      var divId = '#borough_'+ id;
                      $.ajax({
                          url: myUrl,
                          type: 'POST',
                          data: 'borough_id='+myBorough+'&amp;keys='+myKeys,
                          error: function(xhr, statusText, errorThrown){
                              // Work out what the error was and display the appropriate message
                          },
                          success: function(myData){
                              $(divId).html(myData);
                          }
                      });
                  };
  </code></pre>