我使用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]
所以它似乎正在选择正确的对象。我做错了什么?
答案 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();
});
});