jquery each not working as expected

Question

I have the following code .

var last_id = '';
$('.products').each(function(){
  $.ajax({
        type: "POST",
        url: "index.php",
        data: 'id='+last_id,
        success: function(id){
            last_id = id;
        }
    });
});

My problem is that , i want to get the last inserted id from ajax success and pass it to ajax when id call on second time. but now it can't get the last_id and in second time it again send as empty string But when i alert it in ajax success it alert the last id ? How can i achieved it ?

That's because the ajax call has not returned by the time the next ajax call (number 2) is sent. I'm unsure as to how you would do it successfully. — James Khoury
– James Khoury, Commented Jul 26, 2011 at 5:42

MD Sayem Ahmed · Accepted Answer · 2011-07-26 05:41:01Z

2

It won't work because when you send the second request, the first request's response hasn't arrived yet. That's the way it is because the requests you are sending are all asynchronous, so the second request won't wait for the first request to complete. That's why an empty string is being sent the second time too.

One way to send synchronous requests is to set async option to false.

Go to this link and search for the async option there to find a proper explanation.

But you should note that sending synchronous requests may temporarily block the browser, because it waits for the request to complete before doing anything else.

answered Jul 26, 2011 at 5:41

MD Sayem Ahmed

29.3k27 gold badges115 silver badges183 bronze badges

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

Comments

Paul · Accepted Answer · 2011-07-26 07:07:56Z

$.ajax(); is asynchronous, meaning it branching off from your code and executes immediately while your code continues to run. So all your ajax calls start at nearly the same time before any of them return. You could use 'async': false, in your params for ajax, but this might freeze the browser until all requests are complete.

You could get around this by waiting until the callback to make the next call asynchronously:

var last_id = '', count = 0;
(function getId(){
  $.ajax({
        type: "POST",
        url: "index.php",
        data: 'id='+last_id,
        success: function(id){
            last_id = id;
            if(++count < $('.products').length)
                getId();
        }
    });
  });
})();

But

I think in your situation it would be better to make one request and have the server respond with a JSON array of Id's.

BenMorel · Accepted Answer · 2013-12-30 19:06:55Z

1

async: false in ajax function options will help. But I think you are going in wrong way :) You shouldn't execute so many ajax queries.

edited Dec 30, 2013 at 19:06

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jul 26, 2011 at 5:40

Adelf

7164 silver badges12 bronze badges

Comments

Andrew Cooper · Accepted Answer · 2011-07-26 05:39:53Z

0

Does the Ajax call return JSON data? If so try:

    success: function(data){
        last_id = data.id;
    }

or something similar.

answered Jul 26, 2011 at 5:39

Andrew Cooper

32.7k5 gold badges86 silver badges124 bronze badges

Comments

Vivek Goel · Accepted Answer · 2011-07-26 05:50:04Z

0

you have to wait for each ajax

var pro=$('.products').lenght;
last_id(0,"");
function last_id(index,lastid){
  $.ajax({
        type: "POST",
        url: "index.php",
        data: 'id='+lastid,
        success: function(id){
            if(index<pro.length){
             last_id(index+1,id);
            }
        }
    });
});
}

edited Jul 26, 2011 at 5:50

answered Jul 26, 2011 at 5:44

Vivek Goel

24.4k30 gold badges119 silver badges194 bronze badges

Collectives™ on Stack Overflow

jquery each not working as expected

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related