$(".room").each(function () {
i = i + 1;
alert(i);
roomid = $(this).attr("id");
alert(roomid);
$.get("QueryRoom.aspx?ID=" + roomid, function (data) {
$("#" + roomid).html(data);
});
});
});
It seems the roomid in the middle of my get query does not update and is stuck at #22 (the last room ID). The get request performs okay because I can see the div changing content.
Can anyone help?
What you need is a closure to preserve the value of roomid until the asynchronous call is finished. One way to create a closure is using an immediate function where you pass the value of roomid into it as a parameter.
There are a billion articles that explain closures in detail but simply put: a closure is any function that accesses a variable from an outer scope. A special object call a closure is created in this situation in order to preserve the memory locations of all the objects/variables that are referenced within the inner function, creating a context of sorts.
In my example, once you make this closure, you are effectively hiding roomid in the outer scope because you have an immediate function with a variable of the exact same name. So therefore, you will only be accessing the value within the immediate function and it will have the correct id when the ajax call completes.
$(".room").each(function () {
i = i + 1;
alert(i);
roomid = $(this).attr("id");
alert(roomid);
(function(roomid) {
$.get("QueryRoom.aspx?ID=" + roomid, function (data) {
$("#" + roomid).html(data);
});
})(roomid);
});
});
roomid is shared between all of the callback functions to $.get. The loop executes quickly enough to increment it fully before any of the callbacks complete so they all get the largest value. You can correct this in various ways, but the simplest is to pass in roomid at its current value to a closure where the ajax call is made:
(function (roomid) {
$.get("QueryRoom.aspx?ID=" + roomid, function (data) {
$("#" + roomid).html(data);
});
}(roomid))
As a matter of fact, since you're not using var, roomid is global. This probably undesirable. Instead you should do:
var roomid = $(this).attr("id");
This will create a new roomid for each iteration of the .each function that won't be shared -- this makes the closure unnecessary.
