Удалить из базы данных без обратной передачи - хотите анимировать исчезающий элемент, который удаляется

Question

У меня есть сайт, который показывает информацию, содержащуюся в блоках div. Информация берется из базы данных, чтобы пользователь мог изменить информацию или удалить ее.

Когда пользователь удаляет блок div, я хочу использовать jQuery для анимации его исчезновения, а также удаления из базы данных. Как я могу сделать это без обратной передачи, я не хочу, чтобы сайт перезагружался, я просто хочу, чтобы блок Div исчезал визуально и одновременно исчезал из базы данных.

Буду ли я использовать панель обновления Ajax для достижения этой цели?

Answer 1

попробуйте это. Вам придется изменить выражение в начале и создать веб-сервис для обработки обратного вызова.

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

      jQuery(function($) {
           $(expression).click(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) {
                          $(this).slideUp('fast',function(){
                             //gone - perhaps report to the user that delete was successful,
                             //by accessing jason.d
                                var result = eval("(" + json.d + ")");

                              $(this).remove();
                            });
                        },
                        timeout: 5000,
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            if (textStatus == 'timeout') {
                               alert('timeout');
                            }
                            //Other error handlers here
                        }
                 });
           });
       });

 </script>

в вашей кодовой странице на странице:

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

Answer 2

Как то так ...

$.ajax({ ... 
success : function(){ 
    var target = $('#MyDeletedElement');
    target.fadeOut('fast',function(){
        target.remove();
    });
});

Answer 3

Хотя общий пример написан на php, это должно дать вам базовое представление о том, как выполнить то, что вы пытаетесь сделать.

http://papermashup.com/jquery-ajax-delete/

Эта ссылка покажеткак вызвать WebMethod в вашем файле кода с помощью JQuery

http://www.codedigest.com/Articles/ASPNETAJAX/185_Using_JQuery_in_ASPNet_AJAX_Applications%E2%80%93Part_2.aspx