Changing pages, JS stop working

Changing pages, JS stop working

punchipunchi Posts: 6Questions: 1Answers: 0

As you may see on this gif/video:

https://media.giphy.com/media/3o7qDLTKz3LAKUauLS/giphy.gif

The confirm and tooltip works fine on the first page, but changing page... it doesn't work anymore =(

Some code:

$('#datatable').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": {
            "url": "{{ URL::to('ProductosJSON') }}",
            "type": "POST",
            "data": function (d) {
                d.nombre = $("#lista_nombre").val();
           }
        }
} );

$(document).ajaxStop(function () {
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="confirmation"]').confirmation();
});

What im doing wrong? I download the latest version, still can't make it work =/

Thanks guys!

Answers

  • punchipunchi Posts: 6Questions: 1Answers: 0

    I solve it when the change page event is triggered

    // Refresca la confirmacion y tooltip
    $('#datatable')
            .on('page.dt', function () {
                setTimeout(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                    $('[data-toggle="confirmation"]').confirmation();
                }, 0);
            })
            .DataTable();
    

    If there's a more elegant solution, it's welcome =)

  • allanallan Posts: 63,230Questions: 1Answers: 10,417 Site admin

    The best way is to use delegate events, as noted in this FAQ. I'm not sure if the jQuery plug-ins you are using have that option through. Perhaps createdRow could be used instead, to make sure they are only activated on each row once.

    Allan

This discussion has been closed.