jQuery wait for div load to complete

Question

I have a piece of jQuery that constructs the inner HTML of a custom Version History table. To fill each table row with elements I use jQuery's load for each row. However this function is asynchronous, which messes up my table... Code:

//fill tblBody
for (var i = 0; i < xArr.length; i++) {
    tblBody += "<tr>";
    var xDiv = $("<div>");
    xDiv.load(xAppWebUrl + "/Lists/dlWerkinstructies/Forms/DispForm.aspx?ID=" + xItemId + "&VersionNo=" + xArr[i] + " table.ms-formtable", function () {
        var xTbl = $(this).find("table.ms-formtable");
        var tr = xTbl.find("tr");
        $(tr).each(function () {
            var row = $(this);
            var xFieldValue = $.trim(row.find("td:eq(1)").text());
            tblBody += "<td>" + xFieldValue + "</td>";
        });
    });
    tblBody += "</tr>";
}

What happens is that tblBody begins with all <tr></tr> followed by all <td> tags. Any way how I get make the loads synchronous? Also other possible solutions are welcome!! Thanks in advance.

Answer 1

I have modified the function and split it into 3 functions.

I have not tested this code, but based on my past similar experience this can be the solution.

1. Create a table structure with tr inside it.

//Create a table structure with rows having id = version id of an item
function createVersionTable() {
    var tr = [];
    for (var i = 0; i < xArr.length; i++) {
        tr.push("<tr id='"+ xArr[i] +"' class='someclassname'>");
        tr.push("</tr>");
    }
    jQuery("#SomeTableName").html(tr.join(''));
}

2. Iterate TRs and call function to get versions

//iterate through all rows.
function createRows() {
    //iterate all rows based on class name we gave in createVersionTable
    jQuery(".someclassname").each(function () {
        // get version id
        var versionId = this.id.toString();

        // call function 
        getVersions(versionId).then(function (result) {
                //we get result something like "<td>1<td/>,<td>xvalue<td/>"
                var arr = result.split(",");

                // get first where we have stored id of TR
                var temp = arr[0];
                var n = temp.indexOf("/");
                var trID = temp.substring(4, n - 1);

                //setting td to relevant TR
                jQuery("#" + trID).html(result.replace(/,/g, "").substring(n  + 4));
            },
        function (result) {
            alert("error");
        });


    });
}

3. Get Versions store it in TD, return values to 2.

//actual function which gets versions and store in td structure
function getVersions(versionId) {
    //creating deferred object
    var dfd = jQuery.Deferred();
    var xDiv = $("<div>");
    var td = [];

    //setting versionId which is also element id of TR
    td.push("<td>");
    td.push(versionId);
    td.push("</td>,");
    xDiv.load(xAppWebUrl + "/Lists/dlWerkinstructies/Forms/DispForm.aspx?ID=" + xItemId + "&VersionNo=" + versionId + " table.ms-formtable", function ()   {
        var xTbl = $(this).find("table.ms-formtable");
        var tr = xTbl.find("tr");
        jQuery(tr).each(function () {
        var row = jQuery(this);
        var xFieldValue = jQuery.trim(row.find("td:eq(1)").text());
        td.push("<td>");
        td.push(xFieldValue);
        td.push("</td>,");
    });
    dfd.resolve(td.join(''));
});
return dfd.promise();
}

Answer 2

Try below. I have used the $.when(Deferred).done(whatever here);

function YourFunctionName(){


 var tblBody = ''; 

var Callback = function(){


for (var i = 0; i < xArr.length; i++) {
        tblBody += "<tr>";
        var xDiv = $("<div>");
xDiv.load(xAppWebUrl +"/Lists/dlWerkinstructies/Forms/DispForm.aspx?ID=" + xItemId + "&VersionNo=" + xArr[i] + " table.ms-formtable", function () {
            var xTbl = $(this).find("table.ms-formtable");
            var tr = xTbl.find("tr");
            $(tr).each(function () {
                var row = $(this);
                var xFieldValue = $.trim(row.find("td:eq(1)").text());
                tblBody += "<td>" + xFieldValue + "</td>";
            });
        });
        }
}
$.when(Callback).done(tblBody += "</tr>";);
}