Problems with Bootstrap modal and deletion of records

Question

Problems with Bootstrap modal and deletion of records

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a page with n records, and for each of them there is their Delete button. When you press it, a bootstrap modal is opened asking whether to confirm the action or not. Upon confirmation, an ajax function is fired, deleting the record in question.

A problem appeared when I went to do the following test: I was clicking on the delete command of some records, but it did not confirm. I then confirmed the exclusion of one of them. With this, I deleted the latter and all other previous ones that I had canceled the action. Here is my code below:

Delete button:

<a class="delete" id="<?php echo $codigo;?>">APAGAR</a>

Jquery:

$('a.delete').click(function()
    {
        var id = $(this).attr('id');
        var data = 'id=' + id ;

        $('#confirm-delete').modal('show'); 
        $("#confirm-delete").modal().find(".btn-ok").on("click", function(){
        $('#confirm-delete').modal('hide'); 

         $.ajax(
            {
                   type: "POST",
                   url: "<?php echo BASEURL;?>deletar.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                        $('#confirm-delete2').modal('show');
                         $("#confirm-delete2").modal().find(".confirmado").on("click", function(){
                         $('.botao-form').attr("disabled", true);                                
                         $('.botao-form').html("Aguarde...");
                            window.location.reload();                           
                         });
                   }
             });                

          });
    });

Deleting.php page

$id  = (isset($_POST['id'])) ? anti_sql_injection($_POST['id']) : 0; ;   
if ((!preg_match("([0-9])", $id))) $id = 0;
$delete1 = mysqli_query($conexao, "DELETE FROM hoteis where hot_codigo='$id'"

Confirm-delete button:

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            SISTEMA
        </div>
        <div class="modal-body">
            Confirma a exclusão deste estabelecimento? Esta ação não poderá ser desfeita.
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
            <a class="btn btn-danger btn-ok">Deletar</a>
        </div>
    </div>
</div>

Confirm-delete2 button:

<div class="modal fade" id="confirm-delete2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            SISTEMA
        </div>
        <div class="modal-body">
            Estabelecimento excluído com sucesso!
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success confirmado" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>

As I understand it, it's as if each modal that I cancel the action, remains hidden and from the moment I confirm the button of one of them, all previous ones are fired.

What am I doing wrong? I would like to create a jquery function to handle the modals I call, but cancel the action (not confirming the deletion)?

ajax modal

asked by anonymous 18.10.2016 / 21:29

2 answers

1

You are adding an action to the modal button whenever you click the delete button. The modal button is always the same so you just need an event listener.

19.10.2016 / 12:41

Blank Activity does not appear in Android Studio How do I get toDataURL to save in a sessionStorage?

score 1 · Accepted Answer

This happens because even though you "hide" the modal, you are doing the bind of the delete event on the confirm button each time you click on an delete link, as the button remains on DOM the event also remains attached to it, so you should do the following:

$('a.delete').click(function()
{
    var id = $(this).attr('id');
    var data = 'id=' + id ;

    $('#confirm-delete').modal('show'); 
    $("#confirm-delete").modal().find(".btn-ok").unbind('click');
    $("#confirm-delete").modal().find(".btn-ok").on("click", function(){
    $('#confirm-delete').modal('hide'); 

     $.ajax(
        {
               type: "POST",
               url: "<?php echo BASEURL;?>deletar.php",
               data: data,
               cache: false,

               success: function()
               {
                    $('#confirm-delete2').modal('show');
                     $("#confirm-delete2").modal().find(".confirmado").on("click", function(){
                     $('.botao-form').attr("disabled", true);                                
                     $('.botao-form').html("Aguarde...");
                        window.location.reload();                           
                     });
               }
         });                

      });
});

In case I just added the following line:

$("#confirm-delete").modal().find(".btn-ok").unbind('click');