Prevent Hidden Bootstrap 4 Modals to react events

59
September 13, 2021, at 5:40 PM

I am trying to create a "Confirmation Modal" on deleting a row in a table. When the user wants to delete a row a Modal is shown (on click of a button) in which the user must type the username as a confirmation to delete it and click the delete button. This table have multiple rows (one for each user) and every row has its own "delete button" created with this loop:

while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
            ?>
            <tr>
                <th scope="row"><?=$row["ID"]?></th>
                <td><?=$row["username"]?></td>
                <td><?=$row["mail"]?></td>
                <td><button class="btn btn-sm btn-primary"><i class="fas fa-pencil-alt"></i></button></td>
                <td><button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#delete-user-modal" data-bs-user-id="<?=$row["ID"]?>" data-bs-username="<?=$row["username"]?>"><i class="fas fa-trash"></i></button></td>
            </tr>
    <?php
        }

This is how i set my modal:

<!--DELETE USER MODAL-->
<div class="modal modal-dialog modal-dialog-centered fade" id="delete-user-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p></p>
                <input type="text" name="username" class="form-control" id="username-input">
                <input hidden type="text" name="user_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="modal-delete-button" class="btn btn-danger disabled" >Elimina</button>
            </div>
        </div>
    </div>
</div>

Via data-bs I pass the ID and username for each button and I put these data in the Modal with:

        $("#delete-user-modal").on('show.bs.modal', function (event) {
        // Button that triggered the modal
        var button = event.relatedTarget
        // Extract info from data-bs-* attributes
        var userId = button.getAttribute('data-bs-user-id')
        var username = button.getAttribute('data-bs-username')
        // Update the modal's content.
        var modalTitle = $(this).find('.modal-title')
        var modalP = $(this).find('.modal-body > p')
        var modalInput = $(this).find('.modal-body > input')
        var modalDeleteBtn = $(this).find('#modal-delete-button')
        modalTitle.append('Vuoi eliminare <span class="bold">' + username + '</span>?')
        modalP.append('Scrivi <span class="bold">' + username + '</span> per confermare')
        $("#delete-user-modal").on('keyup', event => {
            console.log(modalInput.val())
            if(modalInput.val() === username){
                console.log("check")
                //modalDeleteBtn.classList.remove('disable')
            }
        })
    })

The problem is that when I close a modal and open a new one (ie: clicking button of another row) also the one that is hide react to the on('keyup') event.

I need a way to open a fresh Modal every time i click a new button or reset the modal that I close and have the new one completely fresh.

Answer 1

This for me resolved with:

$("#delete-user-modal").on('hidden.bs.modal', function (event) {
    $(this).unbind('keyup')
});
READ ALSO
How to display an image using RowGroup?

How to display an image using RowGroup?

I'm using the RowGrouping add-on, all the rows are correctly grouped as shown below:

41
Counter JS plugin by bfintal isn&#39;t working

Counter JS plugin by bfintal isn't working

In my practice project, the counter js plugin by bfintal isn't working at all, can anyone help me? https://githubcom/Farhatmahi/Gym

42
How to use case wen in db.session.query.filter_by()? Need to be optimized Python/Flask-SQLAlchemy

How to use case wen in db.session.query.filter_by()? Need to be optimized Python/Flask-SQLAlchemy

If TestDate >= '2021-01-01', filter type of Type_One items, if TestDate < '2021-01-01' query type of Type_Two items, I use below python and Flask-SQLAlchemy to realize it, but it's ugly, how to optimize below code?

28