Ajax - How to wait until php is done?

Question

I am a complete noob to Ajax so please forgive me if this is a completely asinine piece of code:

for (var i=0; i<11; i++) { jQuery('#position').html(i); var offset = jQuery('#offset').html(); var postcall = 'controller.php?url='+encodeURIComponent(scrapurl)+'&scrape_absolute='+absoluteep+'&scrape_season='+season+'&scrape_show='+showslug+'&scrape_defimg='+encodeURIComponent(defaultimg)+'&offset='+offset; jQuery.post(postcall,function(data){ jQuery('#offset').html(data); }); }

The goal here is to execute controller.php with the given values and plug 'offset' back into each call using the returned info. It works but it runs from 0 to 10 instantly and my webserver rejects the subsequent calls.

My goal is to make sure it doesn't call the php again until the last operation has completed.

You could make the next call inside the callback, but there are several options. I'd recommend building the URL outside of the post call, and indenting to help keep things readable, too. — Dave Newton
– Dave Newton, Commented Mar 4, 2013 at 18:04

Jeff B · Accepted Answer · 2013-03-04 18:12:25Z

The key is to make your next AJAX call inside of your callback function. That way, your next post will not occur until the first finishes. In your code, because .post() is non-blocking (asynchronous), it continues the loop immediately, incrementing i/#position and firing off the next .post().

To solve this, encapsulate your .post() in a wrapper function. Have a counter that tracks how many times it has been called. Call the function from the callback of the .post(), and you end up with a recursive function that will do the calls in sequence:

var position=0; function doNextAJAXPost() { if(position < 11) { jQuery('#position').html(position); position++; var offset = jQuery('#offset').html(); jQuery.post('controller.php?url='+encodeURIComponent(scrapurl)+'&scrape_absolute='+absoluteep+'&scrape_season='+season+'&scrape_show='+showslug+'&scrape_defimg='+encodeURIComponent(defaultimg)+'&offset='+offset, function(data){ jQuery('#offset').html(data); doNextAJAXPost(); }); } } doNextAJAXPost();

Ah, I understand in principle, but the example code only loops through once.
If it only goes through once, that would indicate that the post call itself was not successful on either the first or second iteration (depending on whether or not #offset is updated with the data)
I tried changing controller.php to simply echo a value, and it got nothing.
Hmm. Can you access the php directly? Here is a jsfiddle that works: jsfiddle.net/jtbowden/Kmm4X It uses, .ajax(), of which .post() is just a wrapper, but the principle is the same.
Hi my php is ending with echo $offset, but the ajax doesn't seem to be receiving it.

David Fregoli · Accepted Answer · 2013-03-04 18:11:15Z

use a self executing recursive function

(function callself(i) { jQuery('#position').html(i); var offset = jQuery('#offset').html(); var postcall = 'controller.php?url='+encodeURIComponent(scrapurl)+'&scrape_absolute='+absoluteep+'&scrape_season='+season+'&scrape_show='+showslug+'&scrape_defimg='+encodeURIComponent(defaultimg)+'&offset='+offset; jQuery.post(postcall,function(data){ jQuery('#offset').html(data); i++; if ( i < 11 ) callself(i); }); })(0)

Collectives™ on Stack Overflow

Ajax - How to wait until php is done?

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related