Datatable on change ajax on checkbox not working - ajax

Question

Datatable on change ajax on checkbox not working, I have a data table and i am trying to update the value of active in the table into 1 if the checkbox is clicked, and 0 if clicked again. It is not even displaying the console log that i have inserted, I do not where to start. Thank you in advance for any help
ShopsController:
public function activeswitch(){
DB::table('shops')
->update(['active'=>1]);
}
blade.php:
<script>
$(document).ready(function () {
table = $('#shops_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{url('api/admin/shops/get-shops')}}",
rowId: "id",
stateSave: true,
dom: 'Bfrtip',
"buttons": [
'excelHtml5',
'pdf',
'print'
],
"order": [[ 0, "desc" ]],
columns: [
{data: 'id'},
{data: 'name'},
{data: 'image', render: function(data){
return "<img src='/storage/uploads/logo/" + data + "' width=auto height='50' />"
}},
{data: 'color'},
{data: 'switch', render: function(data){
return '<label class="switch">' +
' <input type="checkbox" class="checkbox">' +
'<span class="slider round" data-active-value=0>' +
' </span>' +
' </label>';
}},
{data: 'id', 'width' : '10%', render: function(data){
return '<div class="action-buttons">' +
'<i class="fa fa-eye"></i>' +
'<i class="fa fa-pencil"></i>' +
' <form action="shops/'+data+'" method="POST" style="display: inline-block;">' +
'<input type="hidden" name="_method" value="DELETE" />' +
' #csrf' +
'<button class="btn btn-xs btn-rounded btn-danger" type="submit"><i class="fa fa-trash"></i></button>' +
' </form>' +
'</div>';
}}
],
});
});
$( document ).ready(function() {
$(".checkbox").change(function(e){
console.log('hi')
e.preventDefault();
var selct_ = $(this) //declare this
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ route('active.switch') }}",
data:{
'active':$(this).data('active-value')
},
type: "get",
success: function(result){
console.log('hi')
}
});
});
});
</script>

Answer 1

It's not working because you're adding listeners to elements that don't exists yet.
Datatables.js has a callback that runs once it's been drawn, try this:
$(document).ready(function () {
table = $('#shops_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{url('api/admin/shops/get-shops')}}",
rowId: "id",
stateSave: true,
dom: 'Bfrtip',
"buttons": [
'excelHtml5',
'pdf',
'print'
],
"order": [[ 0, "desc" ]],
columns: [
{data: 'id'},
{data: 'name'},
{data: 'image', render: function(data){
return "<img src='/storage/uploads/logo/" + data + "' width=auto height='50' />"
}},
{data: 'color'},
{data: 'switch', render: function(data){
return '<label class="switch">' +
' <input type="checkbox" class="checkbox">' +
'<span class="slider round" data-active-value=0>' +
' </span>' +
' </label>';
}},
{data: 'id', 'width' : '10%', render: function(data){
return '<div class="action-buttons">' +
'<i class="fa fa-eye"></i>' +
'<i class="fa fa-pencil"></i>' +
' <form action="shops/'+data+'" method="POST" style="display: inline-block;">' +
'<input type="hidden" name="_method" value="DELETE" />' +
' #csrf' +
'<button class="btn btn-xs btn-rounded btn-danger" type="submit"><i class="fa fa-trash"></i></button>' +
' </form>' +
'</div>';
}}
],
"fnDrawCallback": function() {
$(".checkbox").change(function (e) {
console.log('hi')
});
}
});
});