livewire jquery events not working in responsive mode

julianr9230

Friends I have a problem, I am using a datatatable with laravel-livewire, when I reduce the screen to mobile mode my wire:click buttons stop working, the console does not emit any error, help someone know?

    $('.tablas').DataTable({

        language: {
            sProcessing: "Procesando...",
            sLengthMenu: "Mostrar _MENU_ registros",
            sZeroRecords: "No se encontraron resultados",
            sEmptyTable: "Ningun dato esta disponible",
            sInfo: "Mostrando registros del 0 al 0 de un total de 0",
            sInfoFiltered: "Filtrando un total de _MAX_ registros",
            sSearch: "Buscar:",
            sLoadingRecords: "Cargando...",
            oPaginate: {
                sFirst: "Primero",
                sLast: "Ultimo",
                sNext: 'Siguiente',
                sPrevious: "Anterior",
            },
            oAria: {
            sSortAscending:
                ": Activar para ordenar la columna de manera ascendente",
            sSortDescending:
                ": Activar para ordenar la columna de manera descendente",
        },
        },
        responsive: true,          
      });

    $('#DataTables_Table_0_filter label input').addClass('border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mb-2 h-8');
    $('#DataTables_Table_0_filter label').addClass('font-bold');
    $('#DataTables_Table_0_length label select').addClass('border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm h-8 w-12 mr-1 text-xs');

my table and buttons

**please helpme **

allan

Happy to take a look at a test case showing the issue. My guess is that the event is not being explicated when the elements are cloned for the responsive display.

You could try using the experimental listHiddenNodes renderer

renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()

which moves the elements about instead of cloning them.

Allan

julianr9230

friend, thank you very much for your answer, I tried what you say and it still doesn't work, do you have any other ideas?

$('.tablas').DataTable({

        language: {
            sProcessing: "Procesando...",
            sLengthMenu: "Mostrar _MENU_ registros",
            sZeroRecords: "No se encontraron resultados",
            sEmptyTable: "Ningun dato esta disponible",
            sInfo: "Mostrando registros del 0 al 0 de un total de 0",
            sInfoFiltered: "Filtrando un total de _MAX_ registros",
            sSearch: "Buscar:",
            sLoadingRecords: "Cargando...",
            oPaginate: {
                sFirst: "Primero",
                sLast: "Ultimo",
                sNext: 'Siguiente',
                sPrevious: "Anterior",
            },
            oAria: {
            sSortAscending:
                ": Activar para ordenar la columna de manera ascendente",
            sSortDescending:
                ": Activar para ordenar la columna de manera descendente",
        },
        },
        renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes(),
        responsive: true,           


    });

** my buttons no working **

kthorngren

Allan asked for a running test case to help debug the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ButchNZ

None of your wire:click emitters will continue to work.

Instead, you need to write your own click handlers and livewire.emit() in there. Your click handler should also use on bound to an existing element.

For example:

$(body).on('click', '#DeleteConfirmed', function()
{
    window.livewire.emit('delete', clickedID);
});