Markup in JSON loop not getting output to HTML

I've noticed this a few times and I'm starting to think I'm missing some basic understanding. The following is a construction of HTML markup (x) which is eventually output into a div. I use getJSON to get video thumbnails for a particular product and dynamically generate a <td> block for each. But nothing in that JSON loop makes it to the html. Everything NOT in the JSON loop gets output. I've noticed often that a JSON loop seems to be a world of its own, not recognising variables set outside it. I'm obviously missing something.

$(".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='pro开发者_JS百科ducts'>";
   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);
  })

i see this mistake on here often. The problem is that your callback function:

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

is not being executed until your ajax returns.

But, the code below:

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

will finish running as soon as the ajax request is started. Its because ajax is asynchronous (*A*jax), and doesn't pause script execution while it fetches data from the server.

You could probably fix it by moving all the html generation and settinginside of your callback function.

Further to Andy's answer, you can fix this by changing your code to this:

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

This will cause the markup to be added after the asyncronous call has been completed