loading a element of same file through jquery

Question

Hello,

I have a file data.php, when a user clicks update the database is updated in background with jquery but in response i want to reload the particular table whose data was updated.

my html:

<div id="divContainer">
<table id="tableContainer" cellspacing='0' cellpadding='5' border='0'>
<tr>
 <td>No.</td>
 <td>Username</td>
 <td>Password</td>
 <td>Usage Left</td>
 <td>%</td>
</tr><!-- Multiple rows with different data (This is head of table) -->

my jquery:

$('#UpdateAll').click(function() {
      $.ajax({
            type: 'post',
            url: 'update.php',
            data: 'action=updateAll',

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

       $('<div id="divContainer" />').slideUp('500').empty().load('data.php #tableContainer', function() {
        $(this).hide().appendTo('#divContainer').slideDown('1000');
       });
            }
      });  
     });

Everything is working fine the database is getting updated and in success #response is getting loaded with success message but the table is not refreshing.

Answer 1

You already have a div with an id of divContainer but you are creating this element again

$('<div id="divContainer " />').slideUp....

you need

$('#divContainer')
         .slideUp('500')
         .empty()
         .load('data.php #tableContainer', function() {
             $(this).slideDown('1000');
          });

Answer 2

     $('#UpdateAll').click(function() {
  $.ajax({
        type: 'post',
        url: 'update.php',
        data: 'action=updateAll',

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

   $('#divContainer').slideUp('1000').load('data.php #tableContainer', function() {
    $(this).hide().appendTo('#tableContainer').slideDown('1000');
   });
        }
  });  
 });