2

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.

  • You'll get more attention in Stack Overflow, since this is a jQuery question and not a SharePoint question. – wjervis Apr 17 '15 at 13:48
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();
}
  • this looks promising, will try your code tomorrow :) – tomvanderhoek Apr 18 '15 at 1:08
  • :) sure take ur time. – Asad Refai Apr 18 '15 at 19:56
  • Most Welcome! :) – Asad Refai Apr 19 '15 at 4:09
1

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>";);
}
  • unfortunately this doesn't work, for example the addition of the <tr> elements is within the callback function and will be added at the beginning, after that the <td>'s are added. – tomvanderhoek Apr 18 '15 at 1:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.