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
This question is related to
javascript
jquery
ajax
json
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()
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();
});
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.
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
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
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];
}
});
Source: Stackoverflow.com