Execute function after Ajax call is complete

Question

I am new to Ajax and I am attempting to use Ajax while using a for loop. After the Ajax call I am running a function that uses the variables created in the Ajax call. The function only executes two times. I think that the Ajax call may not have enough time to make the call before the loop starts over. Is there a way to confirm the Ajax call before running the function printWithAjax()? I do not want the printWithAjax() function to execute until the Ajax call is complete. Any help will be greatly appreciated.

var id; var vname; function ajaxCall(){ for(var q = 1; q<=10; q++){  $.ajax({                                                      url: 'api.php',                                  data: 'id1='+q+'',                                                                   dataType: 'json',          async:false,                              success: function(data)                    {                id = data[0];                           vname = data[1];          }       });         printWithAjax();    }//end of the for statement }//end of ajax call function 

Answer 1

Try this code:

var id; var vname; function ajaxCall(){ for(var q = 1; q<=10; q++){  $.ajax({                                                  url: 'api.php',                              data: 'id1='+q+'',                                                               dataType: 'json',      async:false,                          success: function(data)                {            id = data[0];                       vname = data[1];      },     complete: function (data) {       printWithAjax();       }     });    }//end of the for statement   }//end of ajax call function 

The "complete" function executes only after the "success" of ajax. So try to call the printWithAjax() on "complete". This should work for you.