jquery json populate Tabelle

Question

Ich versuche, eine Tabelle mit jQuery zu füllen, aber ich werde von Ajax asychronisity gefangen und nicht sicher, wie man es bearbeitet, so dass Dinge in der Reihenfolge passieren. Es gibt eine Hauptschleife über Provisioning-IDs. Für jede Schleife mache ich einen JSON-Aufruf und eine Population von vorerstellter Tabelle. Aber es scheint so, als würde die erste Schleife durchlaufen, bevor der JSON-Kram fertig ist.

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); 
       } 
      } 
     }) 
    } 

} 

Answer 1

Sie benötigen callback

verwenden, können Sie eine funktionierende Lösung zu einem Rückruf verwandtes Problem in How can I get this function to return value retrieved using jQuery.ajax?

sehen, aber Sie werden Ihre Lösung aus diesem

manipulieren muss auch ich empfehlen Sie sammeln stattdessen alle gewünschten IDs und führen dann eine einzige AJAX-Anfrage durch, falls dies in Ihrem Fall möglich ist. Jeder Ajax-Aufruf macht eine http-Anfrage und somit mehrere Verzögerungen.