Question

I am having some trouble with the timing of javascript events. The problem I am having is that one part of the code seems to be executing before another part of the code completes. I need to ensure that the first code finishes before the latter code begins. Here is the initial code:

function(){     
    myLoop();  //this needs to complete before the call to myMethod below 
    $.ajax({
    url: sURL + "myController/myMethod",
    success: function() {       
    $.msg("My Success Message",{live:10000});
    error: function(){
    $.msg("My Error Message",{live:10000});
});
}

And here is the code that loops and inserts records into a db:

function myLoop(){
$('input[name=c_maybe].c_box').each(function(){
if( $(this).prop('checked') ){ 
    var rn = $(this).prop('value'); 
    $.ajax({
        url: sURL + 'myController/myInsert',
        type:"POST",
        dataType: 'text',
        data: {'rn': rn},
        success: function(data) {
            //not sure what to do on success.
        }
    });
} 
}); 
} 

The problem that seems to be happening is that the call to myController\myMethod is happening before myLoop completes inserting all the records into the database.

Can someone suggest a way for me to redesign this code so that I can ensure that myController\myMethod is not called until myLoop has completely finished?

Thanks.

Answer 1

function myLoop() {
   var jqxhrs = [];
   if( $(this).prop('checked') ){ 
       var rn = $(this).prop('value'); 
       jqxhrs.push($.ajax({...
   }
   return jqxhrs;
}

function () {
   $.when.apply(undefined, myLoop()).done(function () {
      $.ajax({
         url: sURL + "myController/myMethod",
         ...
   });
}

$.when.apply is used to call $.when on the array of ajax requests, so .done is not called until they are all complete.