Я пытаюсь сделать ajax delete с 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">×</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');
}