Reputation: 9294
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.
Upvotes: 1
Views: 154
Reputation: 20437
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'));
Upvotes: 1
Reputation: 9294
$('#rsContainer').slideUp('1000').load('index.php #rsTable', function() {
$(this).slideDown('1000');
});
change the slideUp id to parent id.
Upvotes: 0