Checkbox event on second page don't work

Checkbox event on second page don't work

JACOBKRAJACOBKRA 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 :smile:

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Please see this section of the FAQ - this should get you going. Tl;dr - you need to use delegated events.

    Cheers,

    Colin

  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0

    Thanks, i visited this page befor but dit'nt no how bind event on my chexbox. It work on tr or td.

    $('#demandes tbody').on('click', 'td', function () {
                        console.log('ok');
                    });
    

    How can i get event on my checbox ? i try this :

    $('#demandes tbody').on('click', '.checked', function () {
                        console.log('ok');
                    });
    

    But it don't work.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0
  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0

    But it work in codepen :neutral: , but not localy, let clear my cache :smile:

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    My guess is you aren't using DOM sourced data like the codepen but something like ajax to load the data. In this case the tbody is likely not in the DOM when $('#demandes tbody').on('click', 'td', function () { is executed. Change the selector like this:

    $('#demandes').on('click', 'tbody td', function () {
                        console.log('ok');
                    });
    

    Kevin

  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0

    Thanks Kevin for your answer, but it still does not work.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0

    This is all my js code : https://codepen.io/krajacob/pen/RwQxeaj

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    It looks like it should work. Sorry but we will need to see a running test case showing the problem to help debug.

    Kevin

  • JACOBKRAJACOBKRA Posts: 7Questions: 1Answers: 0
    edited May 2022

    Ok i see, the problem is that i can'nt show a running test case. Thanks you for your help :smile:

Sign In or Register to comment.