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

since you are using asycn:false(don't ever use it, if possible), the print will execute only after the ajax is completed.... — Arun P Johny
– Arun P Johny, Commented Apr 25, 2014 at 2:43
but the correct solution will be is to call the print function within the success callback and pass the id and vname as arguments — Arun P Johny
– Arun P Johny, Commented Apr 25, 2014 at 2:44
like jsfiddle.net/arunpjohny/yA8Zu/2 - do you also want to make sure the ajax request is executed in sequence if not you can remove the async:false — Arun P Johny
– Arun P Johny, Commented Apr 25, 2014 at 2:45
Since your just passing numbers 1 - 10, why not pass an array or range (1-10) to your server and just make one ajax call? Rather then making 10 ajax requests. Also you can loop through the data to control its display. — Jay Bhatt
– Jay Bhatt, Commented Apr 25, 2014 at 2:51

Naveen Chandra Tiwari · Accepted Answer · 2014-04-25 03:21:43Z

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.

the complete callback executes irrespective of the success / failure of the ajax call
wrong! complete is called every time stackoverflow.com/a/42229704

Mukesh Chapagain · Accepted Answer · 2016-09-28 08:36:18Z

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(); });

No, ajaxComplete is executed early and is practically useless.

Geo · Accepted Answer · 2014-04-25 02:50:02Z

18

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

answered Apr 25, 2014 at 2:50

Geo

3,2007 gold badges45 silver badges88 bronze badges

3 Comments

Michel Ayres Over a year ago

done is the same as success. you want ".always()"

Geo Over a year ago

@MichelAyres I thought success will run only if it is successful and done would run no matter what...

Michel Ayres Over a year ago

run no matter what == .always() take a look at jQuery.ajax handling continue responses: “success:” vs “.done”? also "An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success()"

Ryan Smith · Accepted Answer · 2014-04-25 02:45:51Z

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()

Phong Ca · Accepted Answer · 2014-04-25 02:47:30Z

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]; } });

Jahirul Islam Bhuiyan · Accepted Answer · 2014-04-25 02:48:04Z

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

Collectives™ on Stack Overflow

Execute function after Ajax call is complete

6 Answers 6

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Linked

Related