Delete from the database without postback - You want to animate the disappeared item that is deleted


I have a site that show infomation that are contained in div blocks. The info is taken from a database so the user can change the info or delete it.

When the user deletes a div block i want to use jQuery to animate that its disappearing and also that its deleted from the database. How can i do this without doing a postback, i dont want the site to reload, i just want the Div block to disappear visually and be gone from the database at the same time.

Would i use Ajax update panel to achieve this ?

try this. You will have to alter the expression at the start and create a webservice to handle the callback.

 <script type="text/javascript" language="javascript">
      var expression = "div.deleteable";

      jQuery(function($) {
              var itemId = $(this).attr("Id");
              $.ajax({ type: "POST",
                       url: "YourPage.aspx/DeleteItem",
                       data: "{'Id' :'" + itemId + "'}",
                       dataType: "json",
                       contentType: 'application/json; charset=utf-8',
                       success: function(json) {
                             //gone - perhaps report to the user that delete was successful,
                             //by accessing jason.d
                                var result = eval("(" + json.d + ")");

                        timeout: 5000,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            if (textStatus == 'timeout') {
                            //Other error handlers here


in your page codebehind file:

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string DeleteItem(string Id)
        //Returns a json  string with success message
        var result = YourBusinessLayerClass.DeleteItem(Id);
        return result;