Execute function after Ajax call is complete
JavascriptJqueryAjaxJsonJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
You can use .ajaxStop() or .ajaxComplete()
.ajaxComplete() fires after completion of each AJAX request on your page.
$( document ).ajaxComplete(function() {
yourFunction();
});
.ajaxStop() fires after completion of all AJAX requests on your page.
$( document ).ajaxStop(function() {
yourFunction();
});
Solution 3 - Javascript
Add .done() to your function
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];
}
}).done(function(){
printWithAjax();
});
}//end of the for statement
}//end of ajax call function
Solution 4 - Javascript
Append .done() to your ajax request.
$.ajax({
url: "test.html",
context: document.body
}).done(function() { //use this
alert("DONE!");
});
See the JQuery Doc for .done()
Solution 5 - Javascript
You should set async = false in head. Use post/get instead of ajax.
jQuery.ajaxSetup({ async: false });
$.post({
url: 'api.php',
data: 'id1=' + q + '',
dataType: 'json',
success: function (data) {
id = data[0];
vname = data[1];
}
});
Solution 6 - Javascript
try
var id;
var vname;
function ajaxCall(){
for(var q = 1; q<=10; q++){
$.ajax({
url: 'api.php',
data: 'id1='+q+'',
dataType: 'json',
success: function(data)
{
id = data[0];
vname = data[1];
printWithAjax();
}
});
}//end of the for statement
}//end of ajax call function