Markup in JSON loop not getting output to HTML

Question

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='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

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.

Answer 2

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