[jquery] append data loaded problem

Question

Hello,

My html is like this

<div id="rsContainer">
     <table id="rsTable"><!-- DATA HERE --></table>
</div>

and my javascript is like this

$('#UpdateAll').click(function() {

  $('#status').fadeIn('500').text('Loading... This may take a while.');
  $.ajax({
        type: 'post',
        url: 'func.php',
        data: 'action=updateAll',

        success: function(response) {
   $('#response').fadeOut('500').fadeIn('500').append(response);

   $('#rsTable').slideUp('1000').load('index.php #rsTable', function() {
    $(this).appendTo('#rsContainer').slideDown('1000');
   });

   $('#status').fadeOut('500').empty();
        }
  });  
 });

This works fine and but after appening the html looks like this

<div id="rsContainer">
        <table id="rsTable">
            <table id="rsTable"><!--data--></table>
        </table>
</div>

As you can see it actually appends it to rsTable how can i maintain the original structure?

Thank You.

Answer 1

$('#rsContainer').slideUp('1000').load('index.php #rsTable', function() {
    $(this).slideDown('1000');
});

change the slideUp id to parent id.

Answer 2

In the tests I've run, doing a .emtpy() before a .prepend() was about 20% faster over 200 iterations than doing a .html(). Strange but true.

If your intent is to have both rsTable's in there, you should add a counter to the id or use a class, since ids must be unique.

It looks like you want to do this though:

$('#rsContainer').empty();
$('#rsContainer').prepend($('#rsTable'));