CODEWITHSUNDEEP
javascriptjqueryajax
neo
neo

Reputation: 2471

JQuery: Updating table content takes too long

I use JQuery Ajax to get a table's content from sever, using code like this:

success: function(data)
{
    //once I get the data, remove the old content from table
    $('.tableBody').empty();

    // then repopulate the table
    $.each(data, function(key,val) {
        //process the data, add different icons, texts...,append it to my table
        showTable(key, val);
   });
}

This works fine. but the problem is the table has many rows, so it takes about 300 millisecond to re-populate, (the empty() only take about 10 millisecond), so for a brief moment, the table is blank.

Is there anyway that I can add some animation between "empty()" and "showTable()" to avoid the blank screen so that it's seamless transition?

Upvotes: 1

Views: 672

Answers (4)

dqhendricks
dqhendricks

Reputation: 19251

You could either, create a table element that is not attached to the DOM, fill it how you need, then replace the existing table once it's finished being generated, or you could have the server do this formatting of the table for you, and simply replace your table with the already formatted ajax response.

Upvotes: 0

Anil
Anil

Reputation: 21910

After you receive your data in your AJAX callback (or even before that), show a loading animation, do your stuff, then show your form/table again.

Kind of a basic example.. On click of submit, show the loading animation, hide the form. Do your stuff (AJAX request), then hide the loading animation, and show the form again.

<img class="loading" src="http://www.link-to-loading-anim.com/loading.gif"/>
    <form method="post">
    <input value="Click Me" type="submit"/>
</form>​

The Javascript:

// On dom ready, hide our loading animation
$('img.loading').hide();

// on form submit, show the animation,
$('form').submit(function(e){
    e.preventDefault(); // we dont really need to submit the form!!

    // Show our loading animation
    $('img.loading').fadeIn();

    // Optional: Hide the form..
    $('form').hide();

    // Do something here.. (AJAX Request)
    // - Your success of AJAX request..

    // Hide the image loader on success.. (setTimeout used for demo purposes)
    setTimeout(hideImageLoader, 2000);

});

function hideImageLoader(){
    $('img.loading').fadeOut('slow', function(){
        $('form').show();
    }); 
}
​

Here is a JSfiddle for a basic loading animation example.

Upvotes: 0

aaaaaa
aaaaaa

Reputation: 2618

If what showTable() is doing is "process the data, add different icons, texts...,append it to [your] table", then it may look like this:

$.each(data, function(key, val){
    $('.tableBody').append(key +' - '+ val);
});

What you should know first is that it's faster to keep the HTML in a string for as long as possible and then put that into a jQuery object and append it to the DOM instead of creating multiple jQuery objects that you'll append to the DOM multiple times as well. So you'll be better off doing something like:

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody').append(tableContents);

And it'll allow you to empty the table just before repopulating it:

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody')
    .empty()
    .append(tableContents);

Upvotes: 1

Chris
Chris

Reputation: 27384

If I were you I would slideUp the old table (or even better place a semi opaque white div over the top) and prepare the new table off screen, then simply swap the contents and slideDown (or fadeOut the white div if you chose this method)

Upvotes: 0

Related Questions