I'm trying to build and attach table rows to an existing table with jQuery. With开发者_开发知识库in my row-building function I need to make another Ajax call based on the current value of theJSON.EmployeeID
within the $.each
loop.
The inner $.getJSON
executes, retrieves valid JSON, and fires its callback, but the td containing data.Name
does not get concatenated to trString
! trString
does not even receive empty td, it seems like that line simply doesn't get executed. Am I missing something obvious, or am I misusing $.getJSON
, or what?
//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function (licensedata) {
buildLicenseTable(licensedata);
});
function buildLicenseTable(trArray) { //Build table row-by-row
var trString = "";
$.each(JSONforTable, function (key, theJSON) { //Build single table row
trString += "<tr>";
trString += "<td>" + theJSON.LicenseID + "</td>";
trString += "<td>" + theJSON.LicenseNumber + "</td>";
trString += "<td>" + theJSON.LicenseType + "</td>";
//The inner $.getJSON call
$.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function (data) {
console.log("*---Callback executing!---*");
trString += "<td>" + data.Name + "</td>"; //<----This line doesn't execute
});
trString += "</tr>";
$("#bigtable > tbody:last").append(trString);
});
}
Remember that ajax is asynchronous. Your buildLicenseTable
function has already returned once your ajax fires and returns. You have some options:
Execute your ajax synchronously. Not recommended.
Restructure your methods to append all the data to an array, and do construction after the last ajax returns. The only problem with this method is that you aren't guaranteed the order in which these methods will return from the server.
Change your ajax methods to return all the data for this operation in ONE call instead of multiple. Much more efficient.
The problem is that the AJAX is async, so you're code is going to fire the request and continue on with the rest of the function. By the time the callback comes, the string has already been appended to the DOM. To solve it just change it to this
$.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
console.log("*---Callback executing!---*");
trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute
trString += "</tr>";
$("#bigtable > tbody:last").append(trString);
});
The following code will work for you
//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function(licensedata){
buildLicenseTable(licensedata);
});
function buildLicenseTable(trArray){//Build table row-by-row
var trString = "";
$.each(JSONforTable, function(key, theJSON){//Build single table row
trString += "<tr>";
trString += "<td>" + theJSON.LicenseID + "</td>";
trString += "<td>" + theJSON.LicenseNumber + "</td>";
trString += "<td>" + theJSON.LicenseType + "</td>";
//The inner $.getJSON call
$.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
console.log("*---Callback executing!---*");
trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute
trString += "</tr>";
$("#bigtable > tbody:last").append(trString);
});
});
}
As others have pointed out, your troubles are because ajax is async, and returns immediately after calling getJSON
without waiting for a response. We just put the code where you append data to the table in a callback function
精彩评论