jQuery: Refresh div after another jquery action?

Question

How do I refresh element (div, class whatever) after another jquery action?

I have this action which is deleting a record from database and I need to refresh div which is fetching some other data from database as well...

Well here's code:

$(function() {
    $(".delete").click(function() {
        var commentContainer = $(this).parent();
        var id = $(this).attr("id");
        var string = 'id='+ id ;

        $.ajax({
           type: "POST",
           url: "delete.php",
           data: string,
           cache: false,
           success: function(){
               commentContainer.slideUp('slow', function() {$(this).remove();});
           }
         });

        return false;
    });
});

Thanks for all help! :)

Answer 1

During an AJAX call you can use the success function to run commands after a successful call. You already have a function in your code so its a simple matter of updating that function. The second div that you will like to update can be loaded with AJAX too.

 $.ajax({
  //other options
  success:function(){
       commentContainer.slideUp('slow', function() {$(this).remove();});
       $('#otherdiv').load('urlofpagewith info.php');
  }

 });

Answer 2

Simply expose the data parameter of the success callback and replace the contents of whichever element, in this example div id="someDiv":

$.ajax({
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(data){
    commentContainer.slideUp('slow', function() {$(this).remove();});
    $('#someDiv').html(data);
  }
 });

See ajax options for more information.

Also, for the love of god don't use type names as variable names, it's really scary and terrible practice, even though string is not a reserved word in Javascript (use data: str or data: dataString instead).