Разметка в цикле JSON не приводит к выводу в HTML

Question

Я заметил это несколько раз, и начинаю думать, что мне не хватает базового понимания.Ниже приведена конструкция HTML-разметки (x), которая в итоге выводится в div.Я использую getJSON, чтобы получить миниатюры видео для конкретного продукта и динамически генерировать блок <td> для каждого.Но ничто в этом цикле JSON не попадает в HTML.Все НЕ в цикле JSON получает вывод.Я часто замечал, что цикл JSON кажется собственным миром, не распознающим переменные, установленные вне его.Я явно что-то упускаю.

$(".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

В дополнение к ответу Энди вы можете исправить это, изменив свой код следующим образом:

$.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 2

Я часто вижу эту ошибку здесь.Проблема в том, что ваша функция обратного вызова:

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

не выполняется, пока ваш ajax не вернется.

Но код ниже:

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

завершит работу, как только будет запущен запрос ajax.Это потому, что ajax является асинхронным (* A * jax) и не приостанавливает выполнение скрипта, пока он получает данные с сервера.

Возможно, вы могли бы это исправить, переместив все генерации HTMLи установка внутри вашей функции обратного вызова.