2010-12-13 7 views
1

jQuery를 사용하여 테이블을 채우려하고 있습니다.하지만 Ajax의 비동기성에 의해 캐치되어지고 일을 순서대로 수행하는 방법을 모르겠습니다. 프로비저닝 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'>&nbsp;&nbsp;&nbsp;" 
        y += "</td>" 
        y += "<td>" 
        y += "<span class='listingText'>" + res.DATA.PRODUCT_NAME[k] + "</span>&nbsp;&nbsp;&nbsp;" 
        y += "<span class='listingText'>" + res.DATA.MODEL_NUMBER[k] + "</span>" 
        y += "</td></tr>" 
        $("#tbl_" + provisioning_id).html(y); 
       } 
      } 
     }) 
    } 

} 
+0

[jquery Plugin-populateTable()] (http://github.com/RaphaelDDL/jquery.populateTable)이 도움이되는지 확인하십시오. – RaphaelDDL

답변

0

당신은 당신이 How can I get this function to return value retrieved using jQuery.ajax?

에 콜백 관련 문제에 대한 작업 솔루션을 볼 수 있습니다 callback

를 사용해야하지만 나는 또한 것이 좋습니다

에서 솔루션을 조작해야합니다 대신 원하는 모든 ID를 수집 한 다음 가능한 경우 단일 Ajax 요청을 수행하십시오. 모든 ajax 호출은 http 요청을 만들어 여러 지연을 만듭니다.

관련 문제