0

Os planteo un problema que me surge y que me está volviendo loco. Tengo un aplicativo desarrollado en Laravel 8. En los listado implemento un botón para poder eliminar registros del mismo. Antes de eliminar un registro se solicita confirmación mediante una ventana modal que recibe una serie de datos por jquery.

Mi problema es que por algún motivo todo funciona perfectamente pero solo sobre los 10 primeros registros del listado, es decir, si realizo una busqueda, amplio el listado de registros o cambio de página el botón de eliminar no activa la ventana modal y por consiguiente no se puede llevar a cabo la eliminación del registro deseado.

Esto sería un modelo de listado:

Modelo de listado

El código implementado en el botón eliminar es el siguiente:

<button type="button" class="btn btn-danger btn-sm btnDelInfo" title="Eliminar registro" data-toogle="modal" data-modalreg="{{action('RoleController@destroy', $rol->id)}}" data-modalid="{{$rol->id}}" data-modalname="{{$rol->rolename}}"><i class="zmdi zmdi-hc-fw"></i></button>

Cuando pulsamos el botón de eliminar ejecuta el siguiente script:

    <script>
    $(document).ready(function() {
        $('.btnDelInfo').click(function(event) {
            event.preventDefault();
            var button = $(this);
            var modalreg = button.data('modalreg');
            var modalid = button.data('modalid');
            var modalname = button.data('modalname');

            $('#formModal').attr('action', modalreg);
            $('.modalid').html(modalid);
            $('.modalname').html(modalname);
            $('#defaultModal').modal('show');
        });
    });
</script>

¿Alguién a quién se le ocurra alguna idea de porque solo funciona sobre los diez primeros registros?.

P.D.: El resto de registros implementa de forma correcta el código del botón pero no lo ejecuta.

Un saludo y gracias de antemano.

2
  • Solo una aclaracion, porque tienes el event.preventDefault();? Commented el 1 dic. 2020 a las 13:29
  • Hola Juan, lo he eliminado, no tenía ningún sentido el utilizado. Gracias
    – jmrufo
    Commented el 1 dic. 2020 a las 13:38

1 respuesta 1

1

me he encontrado con este fallo en ocasiones y el problema es que el código devuelto de la llamada ajax no se contempla dentro del $(document).ready(). Además estás pendiente al evento 'click' de una clase de un botón que aún no existe (ya que es devuelto por ajax y no se considera DOM).

La solución a esto es delegar un evento a un elemento padre:

$('.elemento-padre').on('click', '.btnDelInfo', function(){
    event.preventDefault();
    // ...
});

En este ejemplo, el '.elemento-padre' es el selector que contiene el botón que ejecuta el modal.

Asegúrate de que el '.elemento-padre' es un selector cargado en el DOM y no algo devuelto por la llamada ajax.

4
  • Hola IamDavid, gracias por la respuesta. He añadido al selector <div> que contiene el botón la clase botonera y modificado el código tal y como me comentas (<div style="padding-left: 8px !important;" class="botonera">), pero el resultado es el mismo, no me ejecuta el script. Un saludo
    – jmrufo
    Commented el 1 dic. 2020 a las 13:16
  • Como se obtienen los registros extras? Es decir al seleccionar la cantidad de registros se hace alguna llamada ajax o se recarga la página, puedes poner el código que devuelven los nuevos registros?
    – IamDavid
    Commented el 1 dic. 2020 a las 13:21
  • Hola de nuevo IamDavid. Ya lo he resuelto. Siguiendo tu indicación he colocado como elemento padre la clase .dataTable que es la encargada de dar formato a la tabla de datos y ya funciona a la perfección. Un saludo y gracias de nuevo
    – jmrufo
    Commented el 1 dic. 2020 a las 13:36
  • Eso es, debes delegar el evento a un elemento que esté cargado desde el principio (como es el de la tabla) y no a elementos cargados vía ajax (como los registros '<tr>' de la tabla). Un saludo.
    – IamDavid
    Commented el 1 dic. 2020 a las 14:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.