Each time the modal is shown, you are binding another click event to the
delete button. Move the click event binding outside of the modal show
event, I think that might do it for you.
I could also recommend a few ways to simplify this entire process...
1. When the a.delete-button is clicked, set the uid directly on the
modal's delete button as a data attribute:
$('a.delete-button').click( function() {
$('a#delete').data('uid', $(this).attr('rel'); // You should also change
the uid to a data attribute of this link element: data-uid="{{user.uid.0}}"
});
2. You only need to mess with the click event for delete, I'm not sure all
of that other stuff is necessary...
$('a#delete').click (function() {
uid = $(this).data('uid');
// Handle your post delete logic here
});
Hope this helps
On Friday, April 27, 2012 6:38:15 AM UTC-7, tinti wrote:
>
> Hi,
>
> my modal window used in a table do delete user accounts fires post action
> as often as I opened the modal already.
> Means on first user deletion the post request is made one time, second
> user deletion fires post request 2 times and so on.
>
> Button to open modal:
> <a href="#delete-modal" class="delete-button" data-toggle="modal" rel="{{
> user.uid.0 }}"><i class="icon-trash"></i> Delete</a>
>
> Modal definition:
> <div class="modal hide fad" id="delete-modal">
> <div class="modal-header">
> <a class="close" data-dismiss="modal">x</a>
> <h3>Delete user confirmation</h3>
> </div>
> <div class="modal-body">
> <p>Please confirm removal of user <strong><i
> id="uid"></i></strong> by clicking the <strong>Delete</strong> button</p>
> </div>
> <div class="modal-footer">
> {# <a href="#" class="btn btn-primary" data-dismiss="modal"
> id="cancel">Cancel</a>#}
> <a href="#" class="btn btn-danger" id="delete">Delete</a>
> </div>
> </div>
>
>
> The js I use to modify and fire things:
> $(document).ready(function() {
> var uid;
>
> // Delete button
> $('a.delete-button').click(function() {
> uid = $(this).attr('rel');
> });
>
> // Delete function
> $('#delete-modal').bind('show', function () {
> $('.modal-body').empty().html("<p>Please confirm removal
> of user <strong><i>" + uid + "</i></strong> by clicking the
> <strong>Delete</strong> button</p>");
> $('#delete').show();
> $('i#uid').empty().html(uid);
> $('a#delete').click(function(){
> $.post("/admin/delete/user/" + uid + "/",
> {"csrfmiddlewaretoken": "{{ csrf_token }}"},
> function(data){
> console.log("Post " + reload);
> $('.modal-body').empty().html('<p>' + data
> + '</p>');
> $('tr#' + uid).remove();
> reload = true;
> })
> .error(function() {
> $('.modal-body').empty().html("<div class=\"alert alert-error\"><h4
> class=\"alert-heading\">Received an error from server!</h4><br/>Please try
> again later.</div>"); })
> .complete(function() {
> $('a#delete').hide();
> });
> return false;
> })
> });
> $('a#cancel').click(function(){
> $('#delete-modal').modal('hide');
> });
> });
>
> This is my example, does someone has an idea?
>
> Thanks!
>
