Le balisage dans la boucle JSON ne génère pas de sortie au format HTML

Question

Je l'ai remarqué à quelques reprises et je commence à penser que je ne comprends pas les notions de base. Ce qui suit est une construction de balisage HTML (x) qui est finalement sortie dans un div. J'utilise getJSON pour obtenir des vignettes vidéo pour un produit particulier et générer dynamiquement un bloc <td> pour chacun. Mais rien dans cette boucle JSON ne le rend au html. Tout ce qui n'est PAS dans la boucle JSON est généré. J'ai souvent remarqué qu'une boucle JSON semble être un monde à part, ne reconnaissant pas les variables qui se trouvent à l'extérieur. Il me manque manifestement quelque chose.

$(".prodVidUpdateLink").live("click", function(e) { 
    $("#dspEditVideo").fadeOut("slow");//css({'display':'none'}); 
    var listings_clickedId = $(this).attr("id") 
    var product_id = listings_clickedId.split("^")[1] 
    var user_id = listings_clickedId.split("^")[2] 
    var product_image = listings_clickedId.split("^")[3] 
    var x = "<span class='listingText'><b>Current Videos:</b></span><br>"; 
    x += "<input type='hidden' name='entity' id='entity' value='products'>"; 
    x += "<input type='hidden' name='entity_id' id='entity_id' value='" + product_id + "'>"; 
    x += "<table border='0' cellspacing='0' cellpadding='3'><tr>"; 
    x += "<td class='listingText'><img src='/chinabuy-new/images/website/users/products/images/" + user_id + "/" + product_id + "/" + product_image + "' width='58' height='40'></td>"; 

// None of the markup within the following getJSON block is output in html(x) 

    $.getJSON("/chinabuy-new/cfcs/main.cfc?method=getVideos&returnformat=json&queryformat=column", {"user_id":user_id,"entity":"products","entity_id":product_id}, function(res2,code) { 
    for(var i=0; i<res2.ROWCOUNT; i++){ 
    x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>"; 
    } 
    }); 
    x += "</tr></table>"; 
    $("#dspEditVideo").fadeIn("slow"); 
    $("#dspEditVideoInner").html(x); 
    }) 

Answer 1

Je vois cette erreur ici souvent. Le problème est que votre fonction de rappel:

function(res2,code) { 
    for(var i=0; i<res2.ROWCOUNT; i++){ 
    x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>"; 
    } 
    } 

n'est pas exécuté jusqu'à ce que votre ajax retourne.

Mais, le code ci-dessous:

x += "</tr></table>"; 
    $("#dspEditVideo").fadeIn("slow"); 
    $("#dspEditVideoInner").html(x); 

va terminer l'exécution dès que la demande ajax est démarré. C'est parce que ajax est asynchrone (* A * jax), et ne met pas en pause l'exécution du script pendant qu'il récupère des données du serveur.

Vous pouvez probablement résoudre le problème en déplaçant toute la génération html et la définition de votre fonction de rappel.

Answer 2

Suite à la réponse de Andy, vous pouvez corriger cela en changeant votre code à ceci:

$.getJSON("/chinabuy-new/cfcs/main.cfc?method=getVideos&returnformat=json&queryformat=column", {"user_id":user_id,"entity":"products","entity_id":product_id}, function(res2,code) { 
    for(var i=0; i<res2.ROWCOUNT; i++){ 
     x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>"; 
    } 
    x += "</tr></table>"; 
    $("#dspEditVideo").fadeIn("slow"); 
    $("#dspEditVideoInner").html(x); 
}); 

Cela entraînera le balisage à ajouter après l'appel asyncronous a terminé