1
我想用jQuery填充表格,但是我被Ajax的asychronisity抓住了,不知道如何工作,以便事情按順序發生。有一個超過配置ID的主循環。對於每個循環,我都會執行JSON調用和預先創建的表的填充。但是,似乎在JSON內容完成之前,初始循環已經結束了。jquery json填充表
function getEntityListingsForProvisioning(oArg) {
var user_id = oArg.user_id || parseInt(0) //zero gets nothing
var entity = oArg.entity || "products";
var provisioning_id_list = oArg.provisioning_id;
var detailLinkClass = oArg.detailLinkClass || "productDetailLink"
var retDiv = oArg.retDiv || "divResult"
var provIdArray = provisioning_id_list.split(","); // e.g. ['39', '40']
$("#" + retDiv).fadeIn('slow').html('');
// create a table; we'll populate the rows later
var x = "<table><tr>";
for(var i=0; i<provIdArray.length; i++) {
provid = provIdArray[i];
x += "<td id='td_" + provid + "'>";
x += "<table class='searchPod' border='0' cellspacing='0' cellpadding='2' id='tbl_" + provid + "'>";
x += "</table></td>";
}
x += "</tr></table>";
$("#" + retDiv).html(x)
//loop through provisioning id's and get same list of products for each
for(var j=0; j<provIdArray.length; j++) {
var y = '';
provisioning_id = provIdArray[j];
// get JSON recordset. PROBLEM. I think this isn't getting finished before the main loop ticks over again.
$.getJSON("/cfcs/main.cfc?method=getProductListings&returnformat=json&queryformat=column", {"user_id":user_id,"short":true}, function(res,code) {
var v_listing_class = "listingCaption";
var v_object_type = "ajax";
var v_onclick = 'return hs.htmlExpand(this,{objectType:"ajax"})';
var listings_noresults = "<div class='messageSuccess'><b>No records found!</b><br>Use the left-hand menu to add new records.<br>You can return here any time by clicking the Edit Provisioning link</div>";
if(res && res.ROWCOUNT > 0)
{
for(var k=0; k<res.ROWCOUNT; k++)
{
y += "<tr>"
y += "<td style='width:10px' valign='middle'><input type='button' value='Use' class='btnSelProduct' id='" + provisioning_id + "^" + res.DATA.RECORD_ID[k] + "^" + entity + "^" + "'></td>"
y += "<td style='width:70px' valign='middle'>"
y += "<img id='img_" + res.DATA.RECORD_ID[k] + "' src='http://localhost/chinabuy-new/images/website/users/products/images/" + res.DATA.USER_ID[k] + "/" + res.DATA.RECORD_ID[k] + "/" + res.DATA.IMAGE1[k] + "' width='58' height='40'> "
y += "</td>"
y += "<td>"
y += "<span class='listingText'>" + res.DATA.PRODUCT_NAME[k] + "</span> "
y += "<span class='listingText'>" + res.DATA.MODEL_NUMBER[k] + "</span>"
y += "</td></tr>"
$("#tbl_" + provisioning_id).html(y);
}
}
})
}
}
看看這[jQuery的插件 - populateTable()](http://github.com/RaphaelDDL/jquery.populateTable)幫助 – RaphaelDDL 2012-01-25 13:04:45