Ajax and bootstrap modal

Question

I am trying to make an ajax call to remove a user using the autoload mod. The modal is used to confirm, and it is next.

<!-- Modal --> <div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Delete user</h3> </div> <div class="modal-body"> <p>You are about to delete this user. Are you sure that you want to continue?</p> </div> <div class="modal-footer"> <button id="confirm" class="btn btn-primary">Yes</button> <button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">No, leave</button> </div> </div> 

Then I use the following javascript to handle user input

  $('a#delete').click(function(e){ var anchor = this; $('#deleteModal').modal('show'); $('button#confirm').click(function(e){ $('#deleteModal').modal('hide'); $.ajax({ url: $(anchor).attr('href'), success:function(result){ $(anchor).closest('tr').addClass("error"); $(anchor).closest('tr').delay(2000).fadeOut(); }}); }); return false; }); 

The link that the user needs to click looks like this

 <a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a> 

This works, but I noticed something strange was happening. If I click to delete one user, and I decided to cancel the action from the modal, and then I decided to delete another user who confirms the action, both users will be deleted.

I think the rule that I declared still applies to objects that were clicked during the session. Is there any way to avoid this?

Answer 1

This is due to the way you register the click event on button#confirm . Each time you press the delete button, you register a new event handler for clicking on the modal dialog confirmation button.

The problem with you fits here .

It can be fixed by breaking the logic into two parts.

 $('button#confirm').click(function(e){ $('#deleteModal').modal('hide'); $.ajax({ url: $('#deleteModal').attr('href'), success:function(result){ $(anchor).closest('tr').addClass("error"); $(anchor).closest('tr').delay(2000).fadeOut(); }}); }); $('a#delete').click(function(e){ var anchor = this; $('#deleteModal').modal('show').attr('href', $(anchor).attr('href')); return false; }); 

Here we register the click confirm event only once when the page is loaded, but when the delete button is clicked, we pass the context information to the confirmation modal through the user attribute. In the confirmation callback, we use this contextual information to determine which user should be deleted.

You can test it in a demo here .

Answer 2

When the user clicks the link that he sent, despite pressing the dialog button. You need to prevent the default behavior: e.preventDefault();

  $('a#delete').click(function(e){ e.preventDefault(); var anchor = this; $('#deleteModal').modal('show'); $('button#confirm').click(function(e){ $('#deleteModal').modal('hide'); $.ajax({ url: $(anchor).attr('href'), success:function(result){ $(anchor).closest('tr').addClass("error"); $(anchor).closest('tr').delay(2000).fadeOut(); }}); }); return false; }); 

Another way to do this is to not bind the href value to links. You already have a user attribute, so it has some kind of duplication:

 <a id="delete" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a> 

and js:

  $('a#delete').click(function(e){ var anchor = this; var del_link = '/admin/edit/user/delete/' + $(anchor).attr('user'); $('#deleteModal').modal('show'); $('button#confirm').click(function(e){ $('#deleteModal').modal('hide'); $.ajax({ url: del_link, success:function(result){ $(anchor).closest('tr').addClass("error"); $(anchor).closest('tr').delay(2000).fadeOut(); }}); }); return false; }); 

Do you use the delete tag for all delete links?

Answer 3

cancel the click event with .unbind () or make .one () so that you click the event, make sure that it is called only once.

 $('a#delete').one('click', function(e) { 

or

 $('a#delete').unbind().live('click', function(e) {