Databases
StackOverflow2013
Postsdbo
POMultiple ajax calls inside a each() function.. then do something once ALL of them are finished?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple ajax calls inside a each() function.. then do something once ALL of them are finished?
    text
    copied!<p>Let me explain my code a little bit (Excuse me if somethings wrong, I've just written this example from scratch, it is very close to what I currently have).</p> <p><strong>HTML:</strong></p> <pre><code>&lt;form id="form"&gt; &lt;!-- Friend 1 --&gt; Name 1: &lt;input type="text" name="friendName1" id="friendName1" class="friendName" value=""&gt;&lt;br /&gt; Email 1: &lt;input type="text" name="friendEmail1" id="friendEmail1" value=""&gt;&lt;br /&gt;&lt;br /&gt; &lt;!-- Friend 2 --&gt; Name 2:&lt;input type="text" name="friendName2" id="friendName2" class="friendName" value=""&gt;&lt;br /&gt; Email 2:&lt;input type="text" name="friendEmail2" id="friendEmail2" value=""&gt;&lt;br /&gt;&lt;br /&gt; &lt;!-- Friend 3 --&gt; Name 3:&lt;input type="text" name="friendName3" id="friendName3" class="friendName" value=""&gt;&lt;br /&gt; Email 3:&lt;input type="text" name="friendEmail3" id="friendEmail3" value=""&gt;&lt;br /&gt;&lt;br /&gt; &lt;!-- Friend 4 --&gt; Name 4:&lt;input type="text" name="friendName4" id="friendName4" class="friendName" value=""&gt;&lt;br /&gt; Email 4:&lt;input type="text" name="friendEmail4" id="friendEmail4" value=""&gt;&lt;br /&gt;&lt;br /&gt; &lt;!-- Submit --&gt; &lt;input name="submit" type="submit" value="Submit"&gt; &lt;/form&gt; </code></pre> <p><strong>JS:</strong></p> <pre><code>$("#form").submit(function(){ $(".friendName[value!='']").each(function(){ var idEmail = 'friendEmail' + $(this).attr("id").replace('friendName',''); if($("#"+idEmail+"[value!='']").length &gt; 0){ var name = $(this).val(); var email = $("#"+idEmail).val(); // Submit the ajax request $.ajax({ type: 'POST', url: 'ajax/url', data: { name: name, email: email }, success: function(json) { // Log a console entry if our ajax request was successful console.log(name + " was submitted via ajax"); } }); } }); // Redirect the user to the thank you page setTimeout( function() { window.location= '/thanks'; }, 2000 ); }); </code></pre> <p><strong>JSFiddle</strong> (redirect removed and ajax call replaced with console log for fiddle)</p> <p><a href="http://jsfiddle.net/cM5PX/" rel="nofollow">http://jsfiddle.net/cM5PX/</a></p> <p>The HTML is a simple form, with friend name and friend email input fields.</p> <p>The JS has an each function, which if the name and associated email have values, it runs an ajax call.</p> <p>I need a way for these ajax calls to run (there could be 1 loop, there could be 15) and then after they have all finished, redirect to a new page.</p> <p>The current way I'm doing it is horrible, as all of the ajax calls do not finish running before the page redirects.</p> <p>What can I do to make this better? It needs to be fool proof and ONLY redirect once all of the ajax calls have finished (success or error, it doesn't matter - it just needs to redirect once its finished).</p> <p>I have tried using <code>async: false</code> but it doesn't seem to make a difference.</p> <p>I've thought about putting a counter in the each function and a counter in the ajax success function and if they both match, then do the redirect, but I am looking for some more experienced guidance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload