wawan Setiyawan wawan Setiyawan - 1 month ago 13
Ajax Question

fadeout row after delete with ajax success

i have ajax to delete per

row
. i have table and colomn with
action
to delete

this my ajax



//hapus detail
function deleteDetail(id_po_req_detail) {
var tr = $(this).closest('tr');
$(".loader").show();
$.ajax({
method: "POST",
url: "po_req/po_req_crud.php",
data: {id_po_req_detail: id_po_req_detail, type: "delete_detail"},
success: function (data) {
console.log(data);
setTimeout(function () {
$(".loader").hide();
tr.find('td').fadeOut(1000,function(){
tr.remove();
});
}, 300);
}
});
}

<table>
<thead>
<tr>
<th>No.</th>
<th>Model</th>
<th>Ukuran</th>
<th>Jumlah</th>
<th>Keterangan</th>
<th>Aksi</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Zn 233</td>
<td>Small</td>
<td>2</td>
<td>dewd</td>
<td> <a href="#" onclick=" if(confirm('Hapus detail ?')) deleteDetail(1);">Hapus</a></td>
</tr>
<tr>
<td>1</td>
<td>Zn 233</td>
<td>Small</td>
<td>2</td>
<td>dewd</td>
<td> <a href="#" onclick=" if(confirm('Hapus detail ?')) deleteDetail(2);">Hapus</a></td>
</tr>
<tr>
<td>1</td>
<td>Zn 233</td>
<td>Small</td>
<td>2</td>
<td>dewd</td>
<td> <a href="#" onclick=" if(confirm('Hapus detail ?')) deleteDetail(3);">Hapus</a></td>
</tr>
</table>





how to fadeout with jquery if i click delete button ?thanks so much ... :)

Answer

First of $(this) will not work in your function deleteDetail(id_po_req_detail) you have to pass this as parameter then and then only $(parameter) works. SO

pass second parameter like

deleteDetail(1,this);

deleteDetail(2,this);

deleteDetail(3,this);

Receive that parameter in your function definition like below and change your function like below

function deleteDetail(id_po_req_detail,ele) {
                var tr = $(ele).closest('tr');
                $(".loader").show();
                $.ajax({
                    method: "POST",
                    url: "po_req/po_req_crud.php",
                    data: {id_po_req_detail: id_po_req_detail, type: "delete_detail"},
                    success: function (data) {
                        console.log(data);
                        setTimeout(function () {
                            $(".loader").hide();
                            tr.fadeOut(1000,function(){ 
                              tr.remove();            
                            }); 
                        }, 300);
                    }
                });
            }