0

I'm trying to make ajax delete with confirmation modal bootstrap. My code actually work, but when I inspect with dev tool from browser, I realize that value list_id from previous request also process in new ajax request (when I request first ajax only one process, second request there are two process with previous also repeated, more I request ajax, previous also repeated).

Update : i try replace confirmation modal with basic confirm from javascript and it work perfectly, but i want to use confirmation modal to make it with more elegant design, so i'm still looking for what the problem. Here is what i try :

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

Is there a solution to this problem?

Here is my html code :

    <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>

Here is my 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();
    }
}

Here my controller:

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

Here my model:

function ajaxBulkDelete($id){
        $this->db->where('id_barang',$id);
        $this->db->delete('mbarang');
}
Diskilova
  • 1
  • 6
  • try to leave the checkbox unchecked after you get the value use `this.removeAttr('checked')` after `list_id.push(this.value);` – Lucas Jun 11 '19 at 17:58
  • Thanks @Lucas , i try use `this.removeAttr('checked')` but it run with error, so i change with `$(".data-check").removeAttr('checked')` and it run with no error. but previous request ajax still repeated and the problem still same. – Diskilova Jun 11 '19 at 23:15

2 Answers2

0

As I can see in your code, you are using submit_delete class to delete button, just make sure with the previous request should not have the same class(submit_delete). If the first request will have the same class then it will execute that one also.

Here I'll suggest trying with different class name instead of submit_delete class. sometimes class can be a conflict with other HTML's.

Sorav Garg
  • 1,116
  • 1
  • 9
  • 26
  • Thanks for your suggest @Sorav Garg, i try change `submit_delete` with another name class name. but previous request ajax still repeated. – Diskilova Jun 12 '19 at 06:57
0

I found the problem in my code on :

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

Because onclick event from previous request still active on next onclick event request. Same active name class or id onclick event will also process in next request. What i need to do is make offclick event :

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

Here is my update javascript code : 

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

I found the clue from this answer : https://stackoverflow.com/a/20054942/11628785

Diskilova
  • 1
  • 6