Home / Questions / 411272
Accepted
jmrufo
Asked: 2021-12-02 04:30:11 +0800 CST 2021-12-02 04:30:11 +0800 CST

Problem deleting record from modal window

  • 772

I present a problem that arises and that is driving me crazy. I have an application developed in Laravel 8. In the list I implement a button to be able to delete records from it. Before deleting a record, confirmation is requested through a modal window that receives a series of data by jquery.

My problem is that for some reason everything works perfectly but only on the first 10 records of the list, that is, if I perform a search, expand the list of records or change the page, the delete button does not activate the modal window and therefore does not you can perform the deletion of the desired record.

This would be a listing model:

listing model

The code implemented in the delete button is as follows:

<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>

When we press the delete button, it executes the following 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>

Does anyone have an idea why it only works on the first ten records?

PS: The rest of the records correctly implement the button code but do not execute it.

A greeting and thanks in advance.

php

1 Answers

  1. Best Answer

    I have come across this bug on occasion and the problem is that the code returned from the ajax call is not included in the $(document).ready(). You are also looking at the 'click' event of a button class that doesn't exist yet (since it is returned by ajax and is not considered DOM).

    The solution to this is to delegate an event to a parent element:

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

    In this example, the '.parent-element' is the selector that contains the button that executes the modal.

    Make sure the '.parent-element' is a selector loaded in the DOM and not something returned from the ajax call.

    • 1