I have a table and showing data and using Datatables Yajra. This datatables is showing data, and all function is OK. But, sometimes error. I am using Laravel 5.2.* and yajra datatable 6.0.*.
And this is the error notification.
This is my js code
<!-------------------------------------------->
<!-------------- SLAVE VARIABLE -------------->
<!-------------------------------------------->
<script>
$(document).ready(function() {
$('#slave-variable-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{ url("/variable-list/slave-variable/data-slave-variable") }}'
},
columns: [
{ data: 'VARIABLE_NAME', name: 'VARIABLE_NAME' },
{ data: 'TYPE', name: 'TYPE' },
{ data: 'ADDRESS', name: 'ADDRESS' },
{ data: 'ACCESS', name: 'ACCESS' },
{ data: 'VALUE', name: 'VALUE' },
{ data: 'action', name: 'action', orderable: false, searchable: false},
{ data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
]
});
});
</script>
<!-- DELETE DATA SLAVE_VARIABLE pada view variable-list/slave-variable -->
<script>
$(document).on('click', '.deleteSlaveVariable', function() {
var id = $(this).data('id-variable');
Swal.fire({
title: 'Are you sure to delete this variable?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#0B5EA3',
cancelButtonColor: '#E6222C',
confirmButtonText: 'Delete'
}).then((result) => {
if(result.value) {
$.ajax({
url:"/variable-list/slave-variable/delete/" + id,
method:"GET",
data:{id:id},
success:function(data)
{
alert(data);
$('#slave-variable-table').DataTable().ajax.reload();
}
});
}
})
});
<!-- AJAX CRUD operations -->
// Edit a slave_variable
$(document).on('click', '.modify-modal', function() {
$('.modal-title').text('Modify Data');
$('#id_variable_edit').val($(this).data('id-variable'));
$('#id_slave_edit').val($(this).data('id-slave'));
$('#id_slot_edit').val($(this).data('id-slot'));
$('#variable_name_edit').val($(this).data('variable-name'));
$('#type_edit').val($(this).data('type'));
$('#access_edit').val($(this).data('access'));
$('#address_edit').val($(this).data('address'));
$('#ModifyModal').modal('show');
});
$(document).on('click', '#bulk_delete', function(){
var id = [];
if(confirm("Are you sure you want to Delete this data?"))
{
$('.slave_checkbox:checked').each(function(){
id.push($(this).val());
});
if(id.length > 0)
{
$.ajax({
url:'{{ url("/variable-list/slave-variable/delete-all")}}',
method:"GET",
data:{id:id},
success:function(data)
{
alert(data);
$('#slave-variable-table').DataTable().ajax.reload();
}
});
}
else
{
alert("Please select atleast one checkbox");
}
}
});
</script>
This is my slave-variable.blade.php
<div class="card-body border-top">
<h5>Slave's Variable Data</h5>
<div class="table-responsive">
<table class="table table-bordered table-hover" id="slave-variable-table" name="slave-variable-table">
<thead class="bg-light" align="center">
<tr class="border-1">
<th class="border-1">NAME</th>
<th class="border-1">TYPE</th>
<th class="border-1">ADDRESS</th>
<th class="border-1">ACCESS</th>
<th class="border-1">VALUE</th>
<th class="border-1">ACTION</th>
<th>
<button type="button" name="bulk_delete" id="bulk_delete" class="bulk_delete btn btn-danger btn-xs">X</button>
</th>
</tr>
</thead>
</table>
</div>
</div>
This is my routes
//Read data from table SLAVE_VARIABLES to view /variable-list/slave-variable
Route::get('/variable-list/slave-variable', 'SlaveController@index');
Route::get('/variable-list/slave-variable/data-slave-variable', 'SlaveController@data');
//Update data dari table slave_variables
Route::post('/variable-list/slave-variable/update', 'SlaveController@update');
//Delete data dari table slave_variables
Route::get('/variable-list/slave-variable/delete/{ID_VARIABLE}', 'SlaveController@delete');
Route::get('/variable-list/slave-variable/delete-all', 'SlaveController@deleteAll');
And the las is my SlaveController.php
public function data()
{
$SLAVE_VARIABLES = SlaveModel::select('*');
return Datatables::of($SLAVE_VARIABLES)
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" data-toggle="tooltip"
data-id-variable="'.$row->ID_VARIABLE.'"
data-id-slave="'.$row->ID_SLAVE.'"
data-id-slot="'.$row->ID_SLOT.'"
data-variable-name="'.$row->VARIABLE_NAME.'"
data-type="'.$row->TYPE.'"
data-address="'.$row->ADDRESS.'"
data-access="'.$row->ACCESS.'"
data-original-title="Modify" class="edit btn btn-primary btn-sm modify-modal">Modify</a>';
$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id-variable="'.$row->ID_VARIABLE.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteSlaveVariable">Delete</a>';
return $btn;
})
->addColumn('checkbox', '<input type="checkbox" name="slave_checkbox[]" class="slave_checkbox" value="{{$ID_VARIABLE}}" />')
->make(true);
}
public function update(Request $request)
{
$ID_VARIABLE = $request->ID_VARIABLE;
$ID_SLAVE = $request->ID_SLAVE;
$ID_SLOT = $request->ID_SLOT;
$VARIABLE_NAME = $request->VARIABLE_NAME;
$TYPE = $request->TYPE;
$ACCESS = $request->ACCESS;
$ADDRESS = $request->ADDRESS;
$slave_variables=SlaveModel::where('ID_VARIABLE','=',$ID_VARIABLE)
->update([
'ID_SLAVE'=>$ID_SLAVE,
'ID_SLOT' => $ID_SLOT,
'VARIABLE_NAME' => $request->VARIABLE_NAME,
'TYPE' => $request->TYPE,
'ACCESS' => $request->ACCESS,
'ADDRESS' => $ADDRESS
]);
// alihkan halaman ke halaman /variable-list/slave-variable
return redirect('/variable-list/slave-variable')
->with('update-success', 'Data has ben updated!');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return Response
*/
public function delete($ID_VARIABLE)
{
//memilih id
$SLAVE_VARIABLE = SlaveModel::where('ID_VARIABLE',$ID_VARIABLE);
if($SLAVE_VARIABLE->delete())
{
echo 'Data Deleted';
}
}
function deleteAll(Request $request)
{
$ID_VARIABLES = $request->input('id');
$SLAVE_VARIABLE = SlaveModel::whereIn('ID_VARIABLE', $ID_VARIABLES);
if($SLAVE_VARIABLE->delete())
{
echo 'Data Deleted';
}
}
Then, this is the display when code run normally
Please help me guys, thank u.
php artisan serve?