Currently, I have 2 tables displayed in my view. The first table, table1, is where I select a row and the data from that selection is returned in table2.
The issue I am facing is that when I try to select the second row in table1, it does not send an ajax request even though I can see the click event being triggered.
Screenshots
View:
https://i.sstatic.net/kei3m.png
Results:
https://i.sstatic.net/kRL3p.png
Code
Script:
<script>
$(function(){
// code for table 1
$('.data_table').DataTable({
processing: true,
select : true,
language: {
processing: '<span>Processing...</span>',
},
serverSide: true,
ajax: '{{ route('schoolsIndexData') }}',
columns: [
{ data: 'photo' },
{ data: 'name' },
{ data: 'type' },
],
"order": [[ 0, "desc" ]],
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, ':visible' ]
}
// Other button configurations here
]
});
// code for table 2
$('.data_table tbody').on('click', 'tr', function (e) {
e.preventDefault();
var schoolId = $(this).attr('id');
$('#teachers').DataTable({
processing: true,
destroy: true,
retrieve:true,
language: {
processing: '<span>Processing...</span>',
},
ajax: {
url: '{{url('dashboard/teacherIndexData')}}/'+schoolId,
type: "GET",
cache: true
},
columns: [
{ data: 'id' },
{ data: 'photo' },
{ data: 'name' },
{ data: 'action', orderable: false, searchable: false },
],
// Button configurations for table 2
});
console.log(schoolId);
});
});
</script>
Question
I am unable to get subsequent clicks to send requests to the back-end. What can be done to resolve this issue?