使用ajax成功删除后淡出行

时间:2016-10-14 09:26:53

标签: javascript jquery ajax

我每次row都要删除ajax。我有action表和colomn删除

这是我的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>

如果我点击删除按钮,如何使用jquery淡出?非常感谢... :)

2 个答案:

答案 0 :(得分:1)

$(this) will not中的function deleteDetail(id_po_req_detail)首先使用pass this as parameter,然后$(parameter),然后只有deleteDetail(1,this);有效。那么

传递第二个参数,如

deleteDetail(2,this);

deleteDetail(3,this);

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); } }); }

在您的功能定义中接收该参数,如下所示,并更改您的功能,如下所示

It is possible. Anything that can host and iframe can embed a Power BI report.

答案 1 :(得分:0)

如果你正在使用jQuery,那么你必须使用它的真正力量。第一次引导click事件,内联点击事件是非常容易避免的。

//hapus detail

$(document).on('click','.delete-button',function(event){
  
  console.log($(this).data('id'))
  
  if(!confirm('Hapus detail ?'))
    return false;
  
   var tr = $(this).closest('tr');
                $(".loader").show();
                $.ajax({
                    method: "POST",
                    contentType: "application/json",
                     dataType: "json",
                    url: "po_req/po_req_crud.php",
                    data: {id_po_req_detail: $(this).data('id'), type: "delete_detail"},
                    success: function (data) {
                        console.log(data);
                        setTimeout(function () {
                            $(".loader").hide();
                            tr.find('td').fadeOut(1000,function(){ 
                            tr.remove();            
                        }); 
                        }, 300);
                    }
                });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="#" class='delete-button' data-id='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="#" class='delete-button' data-id='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="#" class='delete-button' data-id='3' >Hapus</a></td>
                                </tr>
                            </table>