How can we make append
wait until the previous append
is complete. I am appending huge amount of data so the present append should check if the previous append is complete. I am able to do this by giving all the append's independently with some time delay. But practically according to my code I may have 'n' number of appends so I want to do this dynamically.
I tried using for or while loop but the script is getting corrupted and the browser is crashing because the next append is starting before the previous append is complete.
$('#printall1').click(function() {
$('#fourElementsonly').empty();
var cleartable = 0;
var maxlimit = 0;
var presentarraycount = 0;
$.post("/PortalUserReport/getjunkdata", null, function(response, status) {
var report = eval(response);
var totalRecordsCount = report.length; //6000
var totalRecordsCountfortheLoop = totalRecordsCount;
var arraycount = Math.ceil(totalRecordsCount / 1000);
var reports = new Array(arraycount); // reports[6]
for (var i = 0; i < arraycount; i++) {
$('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
}
reports[presentarraycount] = "";
$.each(report, function(x) {
if (cleartable == 0) {
for (var i = 0; i < arraycount; i++) {
$('#Portal_User_elements' + i).empty();
}
cleartable++;
}
if (recordnumber <= totalRecordsCountfortheLoop) {
reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td style = \"width:50px; text-align:center \"> " + recordnumber + " </td> <td style = \"width:350px;\"> Name :" + report[x].FirstName + "</td> <td style = \"width:200px;\"> UserName :" + report[x].UserName + " </td> <td style = \"width:200px; \"> Company : " + report[x].Company + " </td> </tr>";
reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td > </td> <td> Registration Date : <label class = \"datepicker\"> " + report[x].ActiveDate + " </label> <td> User CN : " + report[x].UserCN + " </td> <td> Status: " + report[x].Status + " </td> </ td> </tr>";
reports[presentarraycount] += "<tr style = \"height:20px; border: 1px Solid Black\"> <td> </td> <td> User Privilege : " + report[x].Privileges + " </td> <td> </td> </tr>";
maxlimit++;
if (maxlimit == 1000) {
presentarraycount++;
reports[presentarraycount] = "";
maxlimit = 0;
}
}
recordnumber++;
});
for (var i = 0; i < arraycount; i++) {
$(this).delay(1000, function() {
$('#Portal_User_elements' + i).append(reports[i]);
});
}
});
});
Very simple :)
Using when function.
$('<div id="appendedItem">Here</div>').appendTo("body");
$.when( $("#appendedItem").length > 0).then(function(){
console.log( $("#appendedItem").length );
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With