views:

599

answers:

5

Hi,I am new to Jquery. Please excuse me if this a very basic question. 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 ,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. Please help.

+1  A: 

Are you appending to different elements or to a single element? If you're appending to a single element, it may be easier to concatenate all of your data and append as one chunk.

Also, where is the data from? If the data is static (non ajax) then you should be able to call

$('selector').append(data1).append(data2).append(data3);
Rowan
I am using using Ajax Post and getting all the data as a Json Object
kalyan
Even thought the data is dynamic [ajax post and json object] ..if the returned data is small then we can use the above method. if the data is large.. browser will crash.
kalyan
Have you had any problems with the code you posted? Because as far as I can tell, it should work as you're appending data to a different element each time.
Rowan
+5  A: 

Unfortunately, the jQuery append() function does not include a callback. There is no way to really check for completion of it, as it supposedly happens immediately.

See Here for some info on how to use append efficiently. What it pretty much gets at is you can try to get all of your text into one variable and simply use append once.

[update] Since you have all your data in a JSON object from the get go, just do your looping through and put it all in a variable, then just append that once you're finished. [/update]

idrumgood
A: 
$('#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]);
       });
    }
});

});

kalyan
Please review my code..
kalyan
the returned Json object (report) has 6000 records with 8 elements in each record...
kalyan
This should be in the original question.
Tom Leys
A: 

Guys Problem solved !!!

The Below Solution is working on all the browsers especially IE6. The response time in Firefox is 10 sec. but in IE6 it is 2 min 30 sec. I HATE IE6. [no offense]. Thank you all for your answers.

$('#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);// we have 6000 records in the report now
    var totalRecordsCount = report.length; // count = 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++) {
        $('#Portal_User_elements' + i).append(reports[i]);
    }
});

});

kalyan
it looks like your appending each element in the report array individually. This will be **SLOW** in all browsers, especially IE6. Take a look at the article posted in this answer http://stackoverflow.com/questions/1539841/wait-untill-previous-append-is-complete-jquery/1539888#1539888 . You might also want to take a look at documentFragments - http://ejohn.org/blog/dom-documentfragments/
Russ Cam
+1  A: 

I can give you some hints on how to improve your code.

    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>');
    }

Can become:

   var html = '';  
   for (var i = 0; i < arraycount; i++) {
       html += '<table border = "1" id = "Portal_User_elements' + i + '" class="portalUserElements"> </table>';
    }
    $('#fourElementsonly').append(html);

You will accomplish:

  • 999 less jquery selections to '#fourElementsonly'
  • less code to be injected if you put in the class "portalUserElements" the styles:
    border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black

This means you can also:

   for (var i = 0; i < arraycount; i++) {
        $('#Portal_User_elements' + i).empty(); 
    }

becomes (no for loop!):

   $('.portalUserElements').empty();

And:

for (var i = 0; i < arraycount; i++) {
    $('#Portal_User_elements' + i).append(reports[i]);
}

May become:

$('.portalUserElements').each(
     function(i) {
         $(this).append(reports[i]);
     }
);

Edit: these changes are suggested to improve your algorithm performance, while maintaining the full feature it provides.
You may want to compact everything inside a single string variable (including tables) and append it at the end.
See the articles that Russ Cam suggested you in one of his answers.

Alex Bagnolini