Reload the content in Ajax function

Question

I am trying to make a delete function with Ajax.

function delCatItem(catitem){
      var theitem = catitem;
            $.ajax({
        url: "movie/deleteitem/",
        type: "POST",
        data: { "movieid" : catitem },
        dataType: "html",
        success: 
        });
          }

The function takes an id number from a button and posts it to a model where it finds that item and deletes it from the database. This works. But, I am not sure what to put in the success part so that the content reloads without that item. Thanks!

EDIT

<table class="table">
    <?php foreach ($movies as $movie){?>
    <tr>
    <td><button id="item_<?=$movie['movieid'];?>" onClick="delCatItem('<?=$movie['movieid']?>')"class="deletebut">
    <span class="glyphicon glyphicon-remove"></span></button>
    <td><h4><?=$movie['title'];?></h4></td>
    <td><img src="<?=$movie['thumburl'];?>"/></td>
</tr>
<?php } ?>
</table>

Answer 1

You don't need to reload the content, you need to remove the deleted item from the DOM. Without more info about your HTML, I can't be very specific.

function delCatItem(catitem){
    var theitem = catitem;
    $.ajax({
        url: "movie/deleteitem/",
        type: "POST",
        data: { "movieid" : catitem },
        dataType: "html",
        success: function(){
           var selector = '#item_'+catitem;
           $(selector).parents('tr').remove();
        }
   });
}

Answer 2

The standard practice when doing something as you have mentioned is to check task has been completed successfully on server side? just return one flag true or false. if record delete from database (everything goes fine) return true else false and show appropriate message.

Answer 3

First of all, setting theitem to catitem looks redundant?

But in the success portion add a function(){}

function delCatItem(catitem)
{
    //var theitem = catitem;
    $.ajax({
        url: "movie/deleteitem/",
        type: "POST",
        data: { "movieid" : catitem },
        dataType: "html",
        success: function(html)
                {
                    $("#yourContainer").html(html);
                }
    });
}

Your deleteitem script could return the new rowset

Alternatively, use .done() like so:

function delCatItem(catitem)
{
    //var theitem = catitem;
    $.ajax({
        url: "movie/deleteitem/",
        type: "POST",
        data: { "movieid" : catitem },
        dataType: "html"

    }).done(function(html)
    {
        $("#yourContainer").html(html);
    });
}