jquery json populate table

Question

J'essaye de remplir une table avec jQuery, mais je suis prise par l'asynchronisme d'Ajax et je ne sais pas comment l'utiliser pour que les choses se passent dans l'ordre. Il y a une boucle principale au-dessus des identifiants de provisionnement. Pour chaque boucle, je fais un appel JSON et une population de table pré-créée. Mais il semble que la boucle initiale se termine avant que le JSON ne soit terminé.

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

Vous devez utiliser callback

vous pouvez voir une solution de travail à un problème lié au rappel dans How can I get this function to return value retrieved using jQuery.ajax?

mais vous devrez manipuler votre solution de ce

Je recommande également vous collecter à la place tous les identifiants que vous voulez et ensuite faire une seule requête ajax si cela est possible dans votre cas. Chaque appel ajax fait une requête http et donc plusieurs retards.