Checkbox event on second page don't work
Checkbox event on second page don't work
JACOBKRA
Posts: 7Questions: 1Answers: 0
I have a checkbox inside in my table using to select the row. All event work on the first page, but on second page nothing.
I have a checkbox inside in my table using to select the row. All event work on the first page, but on second page nothing.
<table id="demandes" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th></th>
<th>N° Demande</th>
<th>Date Demande</th>
<th>N° Certificat</th>
<th>Client</th>
<th>Nature marchandise</th>
<th>Moyen de transport</th>
<th>Nombre de colis</th>
<th>Poids</th>
<th>Date Connaissement</th>
<th>Conditions d'assurance</th>
<th>Valeur Assurée</th>
<th>Lieu de départ</th>
<th>Date de voyage</th>
<th>N° Connaissement</th>
<th>Destination</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="certificat[]" value="{{ $demande->idVehicule }}" class="checked" data-demande="{{ $demande->idVehicule }}">
</td>
<td align="center"><a href="{{route('detail',['id'=> $demande->idVehicule])}}"
style="color:#8F4F43;text-decoration:underline;font-weight:bold">
{{ $demande->idVehicule}}</a></td>
<td>{{$demande->dtEntree}}</td>
<td>{{$demande->permisCd}}</td>
<td>
{{ $demande->listInfos[0]->value}}
</td>
<td>{{$demande->conducteur3}}</td>
<td>
{{ $moyen_transport}}
</td>
<td>
{{ isset($demande->listInfos[4]) ? $demande->listInfos[4]->value : ''}}
</td>
<td>{{$demande->poidsTc}}</td>
<td>{{ isset(explode('du', $demande->modele)[1]) ? explode('du', $demande->modele)[1] : ''}}</td>
<td>{{$demande->version}}</td>
<td>{{ number_format($demande->puissance, 0, "", " ") }}</td>
<td>{{$demande->caros}}</td>
<td>{{$demande->miseCirculation}}</td>
<td>{{strtoupper($demande->modele)}}</td>
<td>{{strtoupper($demande->lieuPermis)}}</td>
</tr>
@endforeach
</tbody>
</table>
let demandeTable = $('#demandes').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
filename: 'LISTE DES DEMANDES',
title: 'LISTE DES DEMANDES',
exportOptions: {
columns: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
}
}
],
columnDefs: [
{
"targets": [ 6 ],
"visible": false,
"searchable": false
},
{
"targets": [ 7 ],
"visible": false
},
{
"targets": [ 8 ],
"visible": false
},
{
"targets": [ 9 ],
"visible": false
},
{
"targets": [ 10 ],
"visible": false
},
{
"targets": [ 12 ],
"visible": false
},
{
"targets": [ 17 ],
"visible": false
},
]
} );
here is what i try to do :
$('.checked').on('click', function() {
if($(this).is(":checked")){
demandes.push($(this).data('demande'));
console.log('All selected', demandes)
}
else if($(this).is(":not(:checked)")){
demandes = demandes.filter(demande => demande != $(this).data('demande'))
console.log('All selected', demandes)
}
});
This work on the first page, but on the second page it don't work.
I try this again but nothing :
$(document).on('click','.checked', function() {
if($(this).is(":checked")){
demandes.push($(this).data('demande'));
console.log('All selected', demandes)
}
else if($(this).is(":not(:checked)")){
demandes = demandes.filter(demande => demande != $(this).data('demande'))
console.log('All selected', demandes)
}
});
I need a help please 
Answers
Please see this section of the FAQ - this should get you going. Tl;dr - you need to use delegated events.
Cheers,
Colin
Thanks, i visited this page befor but dit'nt no how bind event on my chexbox. It work on tr or td.
How can i get event on my checbox ? i try this :
But it don't work.
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
This is a test case https://codepen.io/krajacob/pen/mdXpXep
But it work in codepen
, but not localy, let clear my cache 
My guess is you aren't using DOM sourced data like the codepen but something like
ajaxto load the data. In this case thetbodyis likely not in the DOM when$('#demandes tbody').on('click', 'td', function () {is executed. Change the selector like this:Kevin
Thanks Kevin for your answer, but it still does not work.
Its hard to say why its not working locally for you without seeing the problem. Can you post a link to your page or a test case replicating the issue so we can help debug?
Do you have the event handler in the document.ready() function? If not it might be executing before the table is in the DOM.
Kevin
This is all my js code : https://codepen.io/krajacob/pen/RwQxeaj
It looks like it should work. Sorry but we will need to see a running test case showing the problem to help debug.
Kevin
Ok i see, the problem is that i can'nt show a running test case. Thanks you for your help