我试图在成功调用ajax后删除带有fadeOut效果的表行。
我试过这样的东西,但它不起作用。
//##### Send delete Ajax request to process.php #########
$("body").on("click", "#response table td a.del_button", function(e) {
e.returnValue = false;
var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
//console.log(myData);
$("#delete_this_user").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
//$row.remove();
$(this).dialog( "close" );
$.ajax({
type: "POST", // HTTP method POST or GET
url: "process.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$(this).closest('tr').find('td').fadeOut(1000,function(){
$(this).parents('tr:first').remove();
});
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
},
"no": function() {
$(this).dialog( "close" );
}
}
});
});
更新 - 我的表格行的结构
<tr>
<td><input type='checkbox' name='' value='' class='' /> sdfsf</td>
<td>sdfds</td>
<td>fdsfs</td>
<td><a href='#' id='edit-82' class='edit_button'><span class='edit_ico'></span></a></td>
<td><a href='#' id='delete-82' class='del_button'><span class='delete_ico'></span></a></td>
</tr>
有人可以告诉我该怎么办?
答案 0 :(得分:11)
在这种情况下,我们可以创建一个闭包变量来保存对要删除的行的引用
$("body").on("click", "#response table td a.del_button", function(e) {
e.returnValue = false;
var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
//console.log(myData);
var $tr = $(this).closest('tr'); //here we hold a reference to the clicked tr which will be later used to delete the row
$("#delete_this_user").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
//$row.remove();
$(this).dialog( "close" );
$.ajax({
type: "POST", // HTTP method POST or GET
url: "process.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
});
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
},
"no": function() {
$(this).dialog( "close" );
}
}
});
});
答案 1 :(得分:0)
<% for( var display of event) { %>
<% var tId = display._id + "9"; %>
<tr id="<%= tId %>">
.....
</tr>`
<% } %>`$.ajax({
type: 'POST',
url: '/eventdelete',
data: $('#deleteevent').serialize(),
success: function(response){
console.log(response.success);
var tId = response.id + "9";
document.getElementById(tId).remove();
document.getElementById("CloseDelModalBtn").click();
}
})