Jquery ajax call within an each loop

jquery each

32,329

Solution 1

You could use the async option for this to make each request synchronous (= halt script execution until each request is finished):

async By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

but, as the docs already say, this is highly discouraged, as it could freeze the browser if a request hangs or times out.

It would be better to change the architecture of your code in a way that can work with the classical callback functions if at all possible.

Solution 2

Pekka has the correct answer. You just need to edit your script as below.

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       async: false,
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

       }
     });

});

32,329

Author by

DazzledKid

...

Updated on March 26, 2021

Comments

DazzledKid over 3 years
I'm having a problem when using the jquery .each() and .ajax() functions together. I'm using .each() to loop through 5 elements and am performing the .ajax() call for each one. My problem is that I only want the loop to continue when a response has been received from each ajax request. Currently, all 5 elements are being looped, 5 ajax requests being made, then 5 responses being returned.

Hers's a simple example:
```
$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

         // I would like the each() loop to pause until this is hit, 
         // and some additional logic can be performed. 

       }
     });

});
```
Cheers.
DazzledKid almost 14 years

I have tried this, I can see why it is highly discouraged. Seemingly setting this to false causes my browser to freeze until all responses have been received and the loop has finished.
YonahW almost 14 years

I am not sure what you were expecting to occur. If you want the script to pause and wait for the response then it will do exactly that pause and wait. Maybe you should explain what it is exactly that you are looking to accomplish as there may be a better way. There is probably a better way to achieve the end results you desire with a different algorithm.
DazzledKid almost 14 years

Cheers for the help, I've gone with your suggestion and changed the structure of my code, I've removed the loop and use recursion instead. Works ok now.
markus over 11 years

Why not just breaking out of the each loop when the first ajax request returns success?