Loop not functioning as I expect

[LLLLLLL]

I'm trying to loop over a table, make an ajax call per row, and get the result back and update the HTML in a cell of the row. I don't know why this isn't working:

 

		// start at row 1 because row 0 is the header row.
		for ( i = 1; i < tbl.rows.length; i++ )
		{
			row = tbl.rows[ i ];
			email = row.cells[ 1 ].innerHTML;

			$.get( "includes/ajaxfile.php", {					
				em: email,
				id: someValue },
				function ( data ) { 
					id = "#status" + i;
					$( id ).html( data );       
				}
			);
		}

 

The result I get is that only the "status" of the last row is ever updated. Attempts to debug are difficult; sometimes "i" shows a value of 3, which is impossible because the table has only three rows, and the for loop should prevent that.

 

I might be overlooking something simple. Thoughts?

[requinix]

It's kinda simple.

 

In JavaScript, you can use anonymous functions. Awesome. You can even refer to variables defined outside them. Also awesome. However, when you do that you get the value at that moment - not when the function was first created. By the time the AJAX comes back your for loop will have finished and you'll get the last row.

 

Introduce another function into the mix:

// start at row 1 because row 0 is the header row.
for ( i = 1; i {
(function(i) {
	row = tbl.rows[ i ];
	email = row.cells[ 1 ].innerHTML;

	$.get( "includes/ajaxfile.php", {					
		em: email,
		id: someValue },
		function ( data ) { 
			id = "#status" + i;
			$( id ).html( data );       
		}
	);
})(i);
}

Now your code will reference the i from the function.

 

However, why aren't you doing all this work when the table's data is being collected server-side? That'd be a heck of a lot better than using AJAX.

[LLLLLLL]

Now your code will reference the i from the function.

 

However, why aren't you doing all this work when the table's data is being collected server-side? That'd be a heck of a lot better than using AJAX.

 

Yes, the code now works. Can you explain what your function(i)... syntax actually means? I'm unfamiliar with that. (I do far more server-side work.)

 

... when the table's data is being collected server-side...  what do you mean by this statement?

[requinix]

Yes, the code now works. Can you explain what your function(i)... syntax actually means? I'm unfamiliar with that. (I do far more server-side work.)

The function is just another anonymous function, but its i parameter will "overwrite" the i coming from the loop. Otherwise you'd need to change the variable names used inside.

The trick is simply passing the current value of i to another function. Inside that function its value won't change, and one function is created for every step through the loop; the function gets evaluated immediately so it's basically just the body of the loop.

 

... when the table's data is being collected server-side...  what do you mean by this statement?

Something is generating the HTML for the table. Presumably a PHP script but it could be anything. That is what should be doing this stuff with emails - whatever it is - so you don't have to.

You're modifying HTML, but the HTML came from a script so it should be getting modified there in the first place.

[LLLLLLL]

As for the function(i), it is interesting that what you said works, but the results don't necessarily display in the grid in rows 1, 2, 3, etc. Any reason why they would be displayed in random order?

 

As for the other thing, it's a pretty complex form. A select box changes something, and based on that "something" we get a different list of rows in the table, and from there the user executes a function that calls this ajax.

 

Thank you in advance; you have been most helpful.

[requinix]

As for the function(i), it is interesting that what you said works, but the results don't necessarily display in the grid in rows 1, 2, 3, etc. Any reason why they would be displayed in random order?

Depends when the AJAX returns. The code starts executing in order but it won't necessarily finish in order. It's asynchronous.

[LLLLLLL]

Right, but I thought it would be synchronous with the function returning data. Is there a way to make it synchronous?

[requinix]

Once it starts going asynchronous it won't go back. It's a whole different timeline.

 

AJAX is, by default, asynchronous. That's what the first 'A' stands for after all. $.get and $.post don't let you change that.

Use $.ajax instead and make sure you pass async:false as an option. Then get rid of the function(){} stuff I added because you won't need that anymore.

[LLLLLLL]

Very good... thanks!