onclick ajax删除确认模态导致先前的请求ajax也处理

时间：2019-06-11 05:25:19

标签： php jquery html ajax codeigniter

我正在尝试使用delete引导程序来制作ajax confirmation modal。我的代码确实有效，但是当我从浏览器中使用dev tool进行检查时，我意识到上一个请求的值list_id也会在新的ajax请求中处理（当我仅请求第一个ajax一个过程时，第二个请求有与先前的两个过程也重复，更多的我请求ajax，先前的也重复）。

更新：我尝试用confirmation modal中的基本confirm替换javascript，它工作正常，但是我想使用confirmation modal它具有更优雅的设计，因此我仍在寻找问题所在。 这是我尝试的方法： 

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
            $(".data-check").removeAttr('checked');
    });

    if(list_id.length > 0)
    {
        if(confirm('Are you sure delete this '+list_id.length+' data?'))
        {
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw();
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        };
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}

是否有解决此问题的方法？

这是我的html代码：

    <div class="container">
        <button class="btn btn-danger" onclick="bulk_delete()"><i class="glyphicon glyphicon-trash"></i> Bulk Delete</button>
        <br />
        <table id="tabel_data" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th style="width:2%;"><input type="checkbox" id="check-all"></th>
                    <th style="width:3%; text-align: center !important;">Number</th>
                    <th>Product Name</th>
                    <th>Categories</th>
                    <th style="width:15%;">Price</th>
                    <th style="width:15%;">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            <tr>
                    <th style="width:2% !important;"></th>
                    <th style="width:3%; text-align: center !important;">Number</th>
                    <th>Product Name</th>
                    <th>Categories</th>
                    <th style="width:15%;">Price</th>
                    <th>Action</th>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- Modal confirmation delete -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="icon-box">
                        <i class="fa fa-exclamation"></i>
                    </div>              
                    <div id="conf_title"></div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="kode" id="kodeData" value="" style="display: none">
                    <div id="conf_footer"></div>
                </div>
                <div class="modal-footer" id="delete_data">
                    <button type="button" class="cancel_delete btn btn-info" data-dismiss="modal">Batal</button>
                    <button type="button" class="submit_delete btn btn-danger">Hapus</button>
                </div>
            </div>
        </div>
    </div>

这是我的JavaScript：

//check all
$("#check-all").click(function () {
    $(".data-check").prop('checked', $(this).prop('checked'));
});

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
    });
    if(list_id.length > 0)
    {
        $('#myModal').modal('show');    $(".submit_delete").show();
        $('#conf_title').html('<h4>Are you sure?</h4>');
        $('#conf_footer').html('<p>Are you sure delete <b>'+list_id.length+'</b> data?</p>');
        $('.submit_delete').text('Hapus');$('.cancel_delete').text('Batal');
        $('#delete_data').on('click','.submit_delete',function(){
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw(); //reload table without change page
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        });
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}

这是我的控制器：

function ajaxBulkDelete(){
$list_id = $this->input->post('id');
    foreach ($list_id as $id) {
            $this->Model->ajaxBulkDelete($id);
    }
    echo json_encode(array("status" => TRUE));
}

这是我的模特：

function ajaxBulkDelete($id){
        $this->db->where('id_barang',$id);
        $this->db->delete('mbarang');
}

2 个答案:

答案 0 :(得分：0)

正如我在您的代码中看到的那样，您正在使用 submit_delete 类删除按钮，只需确保与先前的请求不应具有相同的类（submit_delete）。如果第一个请求具有相同的类，则它将也执行该类。

在这里，我建议尝试使用不同的类名，而不是 submit_delete 类。有时类可能与其他HTML冲突。

答案 1 :(得分：0)

我在的代码中发现了问题：

$('#delete_data').on('click','.submit_delete',function(){

因为上一个请求中的onclick个事件在下一个onclick事件请求中仍然处于活动状态。相同的活动名称类别或ID onclick事件也将在下一个请求中处理。我需要做的是使offclick事件：

$('.class_name').off('click'); -->jquery >= 3.0
$('.class_name').unbind('click'); -->jquery < 3.0

这是我的更新javascript代码： 

//check all
$("#check-all").click(function () {
    $(".data-check").prop('checked', $(this).prop('checked'));
});

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
    });
    if(list_id.length > 0)
    {
        $('#myModal').modal('show');    $(".submit_delete").show();
        $('#conf_title').html('<h4>Are you sure?</h4>');
        $('#conf_footer').html('<p>Are you sure delete <b>'+list_id.length+'</b> data?</p>');
        $('.submit_delete').text('Hapus');$('.cancel_delete').text('Batal');
        $('#delete_data').on('click','.submit_delete',function(){
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw(); //reload table without change page
                        $('.submit_delete').off('click'); //solution
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        });
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}

我从此答案中找到了线索：https://stackoverflow.com/a/20054942/11628785

相关问题
最新问题