Конкатенация в jQuery Ajax Callback не выполняется?

Question

Я пытаюсь построить и прикрепить строки таблицы к существующей таблице с помощью jQuery. В моей функции построения строк мне нужно сделать еще один Ajax-вызов на основе текущего значения theJSON.EmployeeID в цикле $.each.

Внутренний $.getJSON выполняет, получает действительный JSON и запускает его обратный вызов, но td, содержащий data.Name, не объединяется в trString! trString даже не получает пустой тд, похоже, что эта строка просто не выполняется. Я что-то упускаю из виду, или я неправильно использую $.getJSON, или как?

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function (licensedata) {
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray) { //Build table row-by-row

    var trString = "";

    $.each(JSONforTable, function (key, theJSON) { //Build single table row   
        trString += "<tr>";

        trString += "<td>" + theJSON.LicenseID + "</td>";
        trString += "<td>" + theJSON.LicenseNumber + "</td>";
        trString += "<td>" + theJSON.LicenseType + "</td>";

        //The inner $.getJSON call
        $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function (data) {
            console.log("*---Callback executing!---*");
            trString += "<td>" + data.Name + "</td>"; //<----This line doesn't execute
        });

        trString += "</tr>";
        $("#bigtable > tbody:last").append(trString);
    });
}

Answer 1

Помните, что ajax является асинхронным. Ваша buildLicenseTable функция уже вернулась после того, как ваш ajax сработал и вернулся. У вас есть несколько вариантов:

1. Выполните ваш AJAX синхронно. Не рекомендуется.

2. Перестройте ваши методы, чтобы добавить все данные в массив и выполнить конструкцию после возврата последнего ajax. Единственная проблема этого метода заключается в том, что вам не гарантирован порядок, в котором эти методы будут возвращаться с сервера.

3. Измените ваши методы ajax, чтобы возвращать все данные для этой операции в ОДНОМ вызове вместо нескольких. Гораздо эффективнее.

Answer 2

Проблема в том, что AJAX является асинхронным, поэтому ваш код выполнит запрос и продолжит работу с остальной частью функции. К тому времени, когда приходит обратный вызов, строка уже добавлена ​​в DOM. Чтобы решить это, просто измените это на

     $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
          console.log("*---Callback executing!---*");
          trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

         trString += "</tr>";               
         $("#bigtable > tbody:last").append(trString);
     });

Answer 3

Следующий код будет работать для вас

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function(licensedata){
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray){//Build table row-by-row

    var trString = "";  

    $.each(JSONforTable, function(key, theJSON){//Build single table row   
         trString += "<tr>";

         trString += "<td>" + theJSON.LicenseID + "</td>";
         trString += "<td>" + theJSON.LicenseNumber + "</td>";
         trString += "<td>" + theJSON.LicenseType + "</td>";

         //The inner $.getJSON call
         $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
              console.log("*---Callback executing!---*");
              trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

               trString += "</tr>";               
                $("#bigtable > tbody:last").append(trString);
         });
    });
}

Как уже отмечали другие, ваши проблемы связаны с тем, что ajax является асинхронным и возвращается сразу после вызова getJSON, не ожидая ответа.Мы просто помещаем код, куда вы добавляете данные в таблицу, в функцию обратного вызова