JQuery load() inside for loop

Question

I'm trying to write a Greasemonkey script where different pages are loaded with .load() using a for loop and store some of their informations in localStorage. My Problem: because .load() is asynchronous it doesn't work well. My script just stores the Last value I am trying to store. I think that is because i use the var i inside the callback function, and when the callback function is fired i has already another value.

for (var i = 0; i < plantsDiv.length; i++)
{
   objectid = plantsDiv[i].getAttribute('objectid');    
   $("#wrap").load("index.php?objectid="+ objectid,function(){
      //[...] what is happening
      window.localStorage.setItem(objectid,value);
   });
}

When i insert alert("foo") between the callback function and the end of the for loop everything works, because the .load function is loaded, while i am clicking "ok" in the alert window. Is there any way to let the for loop wait until the whole .load is executed?

Thanks for your help, and sorry for my Bad english :)

Put a var before objectid = plantsDiv[i].getAttribute('objectid'); — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 19, 2013 at 19:23
thanks for your help, but thats not solving my problem, i already initialized this variable before. — Sack
– Sack, Commented Feb 19, 2013 at 19:24
That is the problem - it's not i that's the issue. Don't declare it outside the loop - declare it inside ;) — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 19, 2013 at 19:26
Tried declaring inside. And sadly it's not working anyway :( — Sack
– Sack, Commented Feb 19, 2013 at 19:29

Lix · Accepted Answer · 2013-02-19 19:29:33Z

1

The load() function is pretty much the same as a get() function -

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function.

By using the slightly more verbose ajax() function, you'll be able to specify the request to be synchronous with async set to false. Perhaps this will solve your issue.

A simple, synchronous ajax call :

$.ajax({
  url: "example.php",
  data : yourData,
  async : false
},function(response){
  // this is the callback
});

References -

answered Feb 19, 2013 at 19:29

Lix

48.2k12 gold badges107 silver badges134 bronze badges

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

Comments

cernunnos · Accepted Answer · 2013-02-19 19:32:54Z

0

If the objective is not loading the content into an element and instead is to get the content and save it into localStorage you should user $.get (or $.post if you want to post data).

jQuery ajax functions return a jqXHR object, which is derived from a Deferred object, so you can use .done() for success and .fail() for failure:

$.get("index.php?objectid="+ objectid)
.done(function(data) {
    window.localStorage.setItem(objectid,data);
})
.fail(function() {
    // try again later?
});

Edit: Note that the requests will still be launched asynchronously and in this case you may have a lot of parallel requests, the code in the done (or fail) blocks will be run when the response of each request is received.

answered Feb 19, 2013 at 19:32

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

5 Comments

Sack Over a year ago

I'm inserting it into the Page and then store parts of it :/

cernunnos Over a year ago

but you are inserting the contents of multiple requests into the same element (id #wrap), you have no guarantee on what response is received first, and load overwrites existing content.

Sack Over a year ago

I know, that I'm inserting them into the same element. I insert the content using load, then store the content I need into localStorage. After that the next .load should be executed...

cernunnos Over a year ago

The way you are describing the behavior makes me think you believe .load is synchronous. There is no defined order in which the content is loaded and some of the content wont ever be visible. But i guess if it works for you its ok.

Sack Over a year ago

I know, that it isn't synchronous. And i don't need any specific order. I don't even need them to be seen by the User, but i have to include them into the page for some ms because I can't access them (e.g. with document.getElementById("")) without including it 'cause the files I'm trying to load are not valid xml files...

Collectives™ on Stack Overflow

JQuery load() inside for loop

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related