Sorry, Sam, that's a good try but it's not the solution.
If you mentally step through Ryura's code, keeping in mind that a $.ajax
success callback is called asynchronously - not at the time the $.ajax call
is made - you'll see what went wrong:
First, the loop is executed:
i = 1
while i <= 5:
$.ajax(...)
++i
Then, sometime later, the success callbacks get called - and they all use
the *current* value of "i" (now incremented to 6), not the value that "i"
had when $.ajax() was called.
Adding another variable "I" doesn't help - because the same thing will
happen with that variable. But you're on the right track. You just need a
way for each $.ajax call to have its own "i" variable. You do that by
putting the code in a function, perhaps like this:
loadPages( 1, 5 );
function loadPages( first, last ) {
for( var i = first; i <= last; ++i ) {
loadPage( i );
}
}
function loadPage( i ) {
$.ajax({
type: "GET",
url: "http://example.com/5740/"; + i + "/page.html",
dataType: "text",
success: function( data ) {
alert( i );
}
});
}
Now, each time the loadPage function is called, a brand new variable "i" is
created that is local to that one function call. And, very conveniently,
that variable is kept in existence until it is needed in the success
callback. (And note that it doesn't matter that we used the same variable
name in both functions - they are separate variables regardless.)
You can also do the same thing with an inline anonymous function:
function loadPages( first, last ) {
for( var i = first; i <= last; ++i ) {
(function( i ) {
$.ajax({
type: "GET",
url: "http://example.com/5740/"; + i + "/page.html",
dataType: "text",
success: function( data ) {
alert( i );
}
});
})( i );
}
}
This does the same thing as the separate function. I don't think I'd
recommend coding it this way because it's harder to follow, but if you see
code like this you'll know what it is doing.
In both cases, note that each function has its own variable "i" - it's just
by coincidence that we used the same name in both. The anonymous function
version may be a bit more clear if we use a different variable name in the
inner function:
function loadPages( first, last ) {
for( var i = first; i <= last; ++i ) {
(function( n ) {
$.ajax({
type: "GET",
url: "http://example.com/5740/"; + n + "/page.html",
dataType: "text",
success: function( data ) {
alert( n );
}
});
})( i );
}
}
Either way, it does exactly the same thing as the first version with the
named functions.
BTW, when you hear about "closures", this is what they're talking about.
-Mike
_____
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Sam Sherlock
Sent: Tuesday, December 18, 2007 11:43 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Looping ajax requests
I'd say its a scope issue with the var i
I am not a JS expert so this is not definitive
var I = 0, dt = 5;
for (i=1;i<=dt;i++) {
I = i;
$.ajax({
type: "GET",
url: " http://example.com/5740/"+i+"/page.html";,
dataType: "text",
success: function(data){
alert(I);
}
})};
untested; I might either be barking up the wrong tree or I may have
misunderstood the quest
or some other wiser jQuerian may have more to say, all part of the learning
curve :)
On 18/12/2007, Ryura <[EMAIL PROTECTED]> wrote:
Got a problem when looping ajax requests. I have probably made a
mistake somewhere but I can't find it.
dt=5;
for (i=1;i<=dt;i++) {
$.ajax({
type: "GET",
url: " <http://example.com/5740/>
http://example.com/5740/"+i+"/page.html";,
dataType: "text",
success: function(data){
alert(i);
}
})};
This alerts "5" 4 times. Interestingly, it correctly gets 4 pages:
http://example.com/5740/1/page.html
http://example.com/5740/2/page.html
http://example.com/5740/3/page.html
http://example.com/5740/4/page.html
What is the solution?
Thanks,
Ryura
