Ajax call within jquery each loop

Question

Here is a function that I have to write to an xml file through an ajax call. The code works fine the first time the ajax call is made. On the second each loop, the ajax call isn't made at all. I don't know why. I specified asyn to false. That did not help. That doesn't seem to be the problem anyway.

$('#'+divid).children('div').children('div').each(function () {

    var url = $(this).find('a');
    var urlname = url.text();
    var urllink = url.attr('href');
    var urlid = $(this).attr('id');

    alert ("from javascript urlid: "+urlid+" urlname: "+urlname+" urllink: "+urllink);

          $.ajax({
             url: "add_url.php",
             type: "POST",
             data: { nodeid: divid, urlid: urlid, urlname: urlname, urllink: urllink },
             cache: false,
             async: false, 
             success: function (response) {
             if (response != '') 
                {
                    alert(response);
                 }
             }
         });
});

Setting `async: false` in the ajax call won't have an effect, because you are looping in an own function, which is getting called asynchronously by jQuery to iterate over all elements. Each executed function then will wait for itself for the ajax call to finish. But they will all run at the same time. — Wulf, Sep 05 '11 at 19:14
@Wulf: The callback functions are **not** called asynchronously: https://github.com/jquery/jquery/blob/1.6.3/src/core.js#L609-L647 — Felix Kling, Sep 05 '11 at 19:38
I have used the same format, ajax in an each() function and it works fine. Have you checked in Firebug that only one POST request is being made and is there definitely more than 1 object. Do you get multiple alerts? — MattP, Sep 05 '11 at 20:14
@MattP There is definitely more than one object. The alert statements show all the objects. But the ajax call is only made once. The second time that php function isn't called. — user823527, Sep 06 '11 at 00:37
Can you use Firebug to check if only 1 POST request is being made, it should work, someone else has tried it and it works so you need to see if multiple POST requests are being made but there is some kind of PHP error which means they don't complete the expected task. Firebug Console should help a lot with this kind of debug. — MattP, Sep 06 '11 at 10:56

score 1 · Accepted Answer · answered Sep 05 '11 at 19:16

1

This really works for me

http://jsfiddle.net/genesis/DTjZQ/4 (3 POST request sent with response status 404)

be sure that your html is good and with same structure as in my fiddle

answered Sep 05 '11 at 19:16

genesis

50,477
20
96
125

I was also able to get the alert statements showing that the each function iterates through all the children. The problem was that the php function was not being called. When I tested the fiddle, I didn't get the response confirming that the php was called. – user823527 Sep 05 '11 at 23:28
Were you able to put a response in the php function to confirm that it is called three times? – user823527 Sep 05 '11 at 23:36
@user823527: because fiddle do not support PHP. In your case, there's problem in PHP not in JS – genesis Sep 06 '11 at 04:31
The problem was in the PHP function. Once that worked, the .each looped through all the children. – user823527 Oct 22 '11 at 02:37

score 0 · Answer 2 · answered Sep 05 '11 at 19:16

0

Instead of making multiple AJAX requests, I suggest appending the data to an array and then sending the entire array of objects.

(Basically the literal object you're using for data would be appended to an array instead of used in a request, and then once the each is done, you would send the array as the data.)

answered Sep 05 '11 at 19:16

Corbin

33,060
6
68
78

I thought of that. I was just wondering why the ajax call was only made once. I will see how the array works. – user823527 Sep 05 '11 at 23:22

Ajax call within jquery each loop

2 Answers2

Linked