Ajax function into a loop

Question

I request your answer for a issue I've got (part is an array):

for(i=1;i<part.length;i++){
    $("#content").append('<div id="id' + i + '"></div>');
    $.get('ajax.php?id=' + i, function(data) {
        console.log("cache" + i);
        $("#id" + i).html(data);
    });
});

The problem is that into $.get function, the i value is the value of I when the loop is ended. As there are 140 row in my Array (part), I will always be 140, not 1 then 2 then 3 ..

How to get the i value in the ajax callback ?

Thanks for reply.

Read the section "Creating closures in loops: A common mistake" here — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Apr 29, 2013 at 10:08

skuntsel · Accepted Answer · 2013-04-29 10:00:43Z

2

Or alternatively, get a JSON from server and iterate over it:

$.get('ajax.php', { from: 1, to: 140 } ).done(function(data) {
    $(data).each(function(index) {
        //do something with this and index
    });
});

This way you'll have access to index internally and will fire only one request to server, thus not polluting the network.

answered Apr 29, 2013 at 10:00

skuntsel

11.8k11 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2013-04-29 09:54:01Z

0

As the AJAX call is asynchronous, all the callbacks run after the loop.

You can use a function expression to create a separate variable for each iteration:

for(i=1;i<part.length;i++){
  $("#content").append('<div id="id' + i + '"></div>');

  (function(i){

    $.get('ajax.php?id=' + i, function(data) {
      console.log("cache" + i);
      $("#id" + i).html(data);
    });

  })(i);

});

answered Apr 29, 2013 at 9:54

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Alnitak · Accepted Answer · 2013-04-29 10:03:40Z

0

Note that your loop will try to fire off as many AJAX requests at a time as your browser will permit, with no guarantee that they'll complete in any particular order.

If you really must fire off 140 AJAX requests, I suggest this, instead:

var i = 1;
(function loop() {
    if (i < part.length) {
        $("#content").append('<div id="id' + i + '"></div>');
        $.get('ajax.php?id=' + i).done(function(data) {
            console.log("cache" + i);
            $("#id" + i).html(data);
            i++;
        }, loop);
     }
});

answered Apr 29, 2013 at 10:03

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

MMeersseman · Accepted Answer · 2013-04-29 09:58:06Z

-1

Guffa his answer should work, you could also use the $.ajax-version and put async-parameter to false. Check out the documentation to see how to use it.

Edit: It should be noted though that using async: false is a bad practice and will be deprecated.

answered Apr 29, 2013 at 9:58

MMeersseman

2,6511 gold badge15 silver badges8 bronze badges

5 Comments

Alnitak Over a year ago

async: false is bad practice and is going to be deprecated

MMeersseman Over a year ago

Thanks for informing me, I'll edit my answer and put your feedback in it.

Beetroot-Beetroot Over a year ago

It's not just bad practice and deprecated. In some browsers it simply won't work.

MMeersseman Over a year ago

Hmm, learn something new everyday. Do you want me to delete my post?

mplungjan Over a year ago

What browsers do not support async=false?

Collectives™ on Stack Overflow

Ajax function into a loop

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related