I'm using a grid widget to display a bunch of data. Because of the way the grid works, I need to run an ajax query on each of the rows in the table after it has loaded. (I tried to figure out a better way, there isn't one.) I'm running the queries at the correct time, that's not an issue, but my page is returning strange results.
I have to go through each row of the table for other functions as well, so I'm running the ajax calls inside the for
loop that everything else (synchronous) runs inside. The ajax calls are both sending and receiving back the correct data, but it's not being applied to the grid. I have three possible return values: read
applies the read-row
class, alert
applies the alert-row
class, and none
is a dummy return that does nothing other than indicate success. If anything in the row returns read
, however, that class is being applied to the last row of the grid instead of the one that was originally referenced in the request.
What am I doing wrong? How would I rewrite this to correctly apply the given class based on the ajax response? The declarations of the row information, data, and the ajax call itself are all correct. The correct information is being sent in the call, and the correct information is being received back.
Here's my current code. I tried putting the success
function in as a done
block appended to the ajax call, but that causes the same problem.
// this is the correct initialization
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
// these are also correct. I can step through with the debugger and
// currentRow is properly set
var currentUid = gridData[i].uid;
var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
// the grid caches its row information when refreshed, so this is
// necessary to "reset" the row
$(currentRow).removeClass("read-row");
$(currentRow).removeClass("alert-row");
// other synchronous stuff, only manipulates individual cell data
$.ajax({
cache: false,
type: "GET",
url: "/correct/url",
data: { "pId": gridData[i].Id },
dataType: "text",
success: (function(res) {
if (res === "read") {
$(currentRow).addClass("read-row");
} else if (res === "alert") {
$(currentRow).addClass("alert-row");
}
}),
error: (function() {
alert("errormsg");
})
});
// more synchronous stuff, only manipulates individual cell data
}