Using ajax in .each() loop

Question

I'm trying to use ajax in a loop of tr.

Heres my code :

var i=0;
$("tr").each(function() {
var row = datastring;
console.log("I = " + i);
$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});
i++;
});

Expected Result

So I want events to be fired in order where console.log must return logs in following order:

I = 0
Success or Error
I = 1
Success or Error

Actual Result

But after I run the code the console.log returns logs in following order

I = 0
I = 1
Success or Error
Success or Error

So it means my ajax function is called after my each loop is complete. But I dont want the function to loop unless ajax request is compete.

Let me know if you need more explanation.

Thanks.

Ajax is asynchronous, running it in async:false mode will result in a bad UX (the browser will lock until your loop is finished, it will look like your page is broken) — user400654
– user400654, Commented Oct 31, 2012 at 14:22

A.M.K · Accepted Answer · 2012-10-31 14:32:07Z

As mentioned mutiple times, Ajax is asynchronous. This means that other functions and code can run at the same time, the benefit of this is that the browser doesn't have to wait for a request to finish before continuing with the page JS execution. Imagine what it would be like if you have a dozen Ajax requests on a page and one server takes 30 seconds to respond...

However, if you still want to run the requests synchronously, you can set the async flag to false:

var i = 0;
$("tr").each(function() {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
    i++;
});

P.S. You don't need to manually increment i, jQuery's .each() can provide it:

$("tr").each(function(i) {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
});

Marcus · Accepted Answer · 2012-10-31 14:21:54Z

1

You'd have to set async to false.

$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    async: false,
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});

This is not the best thing to do though, as it may lock up the browser, and the whole point of AJAX is to be asynchronous.

answered Oct 31, 2012 at 14:21

Marcus

5,4873 gold badges36 silver badges54 bronze badges

Comments

marc_s · Accepted Answer · 2016-01-16 10:02:34Z

1

Use async=false.

Here is a quote from the jQuery documentation:

asyncBoolean Default: true By default, all requests are sent asynchronously (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. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the complete/success/err

or callbacks.

edited Jan 16, 2016 at 10:02

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 31, 2012 at 14:23

Mortalus

10.7k12 gold badges74 silver badges122 bronze badges

Collectives™ on Stack Overflow

Using ajax in .each() loop

Expected Result

Actual Result

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Expected Result

Actual Result

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related