title: how do i wait for multiple ajax calls to complete from a .each loop
body: <p>I am running a loop that updates records on a table but i need to wait for all of the records to update before i continue on.</p>
  
  <p>How can I have jquery wait until all of the calls in the loopselectedrows function completes?  I have read about .deferred and .when but i am not sure how to implement 
  either.  they both do not seem to able to handle an array of calls if i where to change over to using an array for the ajax posts.  Any help would be greatly appreciated.  </p>
  
  <p>this is the button that starts it all :</p>
  
  <pre><code>                click:  function () {
  
                          // validate all rows
                          var $selectedRows = $('#Table1').jtable('selectedRows');                                             
                          LoopSelectedRows($selectedRows, 'Validate');
  </code></pre>
  
  <p>/// wait here until all ajax calls have completed
  // then continue with checking </p>
  
  <pre><code>                        // check for any row with an error 
                          var $ValidatedRows = $('#Table1').jtable('selectedRows');
                          var boolCheck = checkValidatedRows($ValidatedRows);                            
  
  
                          // if all records are succesfull then add them
                      // else alert user
                          if (boolCheck == true) {
                              LoopSelectedRows($selectedRows, 'Add');
                          }
                          else {
                              alert("Please correct invalid records and try again");
                          }
  
                  }  
  </code></pre>
  
  <p>the first thing this does is take all of the records from the table and passes them to a looping function.  </p>
  
  <p>this is the looping function -  </p>
  
  <pre><code>function LoopSelectedRows(SelectedRecords, actionType) {
  
      if (SelectedRecords.length &gt; 0) {
          //Show selected rows
          SelectedRecords.each(function () {
              var record = $(this).data('record');
  
              record.PERSON_NAME = record.PERSON_ID;
  
              // Actions for loop 
  
              // Validation Action
              if (actionType == 'Validate') {
                   check = validateRecord(record);
              }
  
              // call add function   
              if (actionType == 'Add') {
                  AddRecordToTable(record);
              }
          })
      };
  
  }
  </code></pre>
  
  <p>this loop can either validate or add records for now i am only worried about the validation function</p>
  
  <p>this is the validation function:</p>
  
  <pre><code>function validateRecord(dataRecord) {                
  
      $.ajax({
          url: "./ValidateAddRecord",
          type: 'POST',
          contentType: 'application/json',
          dataType: 'json',
          data: JSON.stringify(dataRecord),
          success: function (data) {
              if (data.Result == "OK") {
  
                  // update record with message 
                  $('#table1').jtable('updateRecord', { record: data.Record });
  
              }
              else {
                  // display error
                  alert(data.Message);
              }
          }
      });        
  }
  </code></pre>