动画TR在ajax请求上消失

时间:2016-05-25 00:26:40

标签: javascript jquery bootbox

我使用bootbox创建以下模式:

$("a.delete").on("click", function() {
    var id = $(this).attr('id').replace('item_', '');
    var parent = $(this).parent().parent();
    var table = $(this).attr('rel');
    bootbox.dialog({
      message: "Are you sure you want to delete this entry?",
      title: "Delete Confirmation",
      buttons: {
        success: {
          label: "Yes",
          className: "btn-danger",
          callback: function() {

            $.ajax({
                type: "POST",
                url: "",
                data: 'deleteItem=' + id + '&table=' + table,
                beforeSend: function () {
                    parent.animate({
                        'backgroundColor': '#E3E3E3'
                    }, 400);
                },
                success: function (msg) {
                    if (msg == "success") {
                        $('#projects').DataTable().row(parent).remove().draw();
                        $("html, body").animate({
                            scrollTop: 0
                        }, 600);
                        count();
                    } else if (msg == 'last') {
                        $('#rld_div').load("<?php echo $_SERVER['REQUEST_URI']; ?> #rld_div");
                    } else {
                        bootbox.alert(msg);
                    }
                    count();
                }
            });
          }
        },
        danger: {
          label: "No",
          className: "btn-primary"
        },
      }
    });
});

HTML:

<a href="javascript:void(0);" class="delete" rel="projects" id="item_206678293">Delete Project</a>

它从<a>的id中删除id,并从rel获取表的名称。一切似乎都在起作用,但父母(即tr)不会动画,只会消失

当我记录var parent时,我得到了这个[tr.odd, prevObject: m.fn.init[1], context: a#item_250558768.delete]所以它似乎正在选择正确的对象。我做错了什么?

1 个答案:

答案 0 :(得分:0)

如果您在最近的父级<tr>之后(假设您的链接位于表格行中),则只需使用父级 s (&#39; tr&#39;) (注意&#39;)。

就动画而言,我不确定beforeSend是否允许您修改DOM - the manual使其看起来似乎是允许您在发出请求之前修改XMLHttpRequest对象。将动画移出ajax请求可能更有意义,并在&#34;完成&#34;回调animation

如果这似乎可行,您可以使用$.post帮助程序而不是$.ajax来简化您的代码:

parent.animate({ 'backgroundColor': '#E3E3E3' }, 
    400,
    function(){
        var data = { 
            deleteItem : id, 
            table: table 
        };

        $.post(url, data)
            .done(function (msg, jhr, status) {
                if (msg == "success") {
                    $('#projects').DataTable().row(parent).remove().draw();
                    $("html, body").animate({
                        scrollTop: 0
                    }, 600);
                    count();
                } else if (msg == 'last') {
                    $('#rld_div').load("<?php echo $_SERVER['REQUEST_URI']; ?> #rld_div");
                } else {
                    bootbox.alert(msg);
                }
                count();
            });
    });