1

I am using bootstrap confirmation plugin, and I have a table with a list of users. One of the columns has a delete button which goes to a link to delete the user, but before deleting the user I have a confirmation box which needs to be clicked. I want to just use one confirmation dialog that pops up for every button and I want to assign the link of the user id to the delete button.

Now the twist is that the whole table is within a form for multiple deletion as well. So I cant have individual forms for each delete button. 

<table class="table table-bordered table-striped mb-none" id="datatable-default">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th class="center">Actions</th>
        </tr>
    </thead>
    <tbody>
    <tr role="row" class="even">
        <td>1</td>
        <td><a href="http://website.dev/globaladmin/users/7">jane doe</a></td>
        <td>jane@gmail.com</td>
        <td>
            <a href="#" class="confirmation-callback" data-id="1" data-placement="left">
                <i class="fa fa-trash-o"></i>
            </a>
        </td>
    </tr>
    <tr role="row" class="even">
        <td>2</td>
        <td><a href="http://website.dev/globaladmin/users/7">john doe</a></td>
        <td>john@gmail.com</td>
        <td>
            <a href="#" class="confirmation-callback" data-id="2" data-placement="left">


   <i class="fa fa-trash-o"></i>
        </a>
    </td>
</tr>
<tbody>

And here my js code:

$('.confirmation-callback').confirmation({
        onConfirm: function() {
            alert('You clicked: delete');
        },
        onCancel: function() {
            alert('You clicked: cancel');
        }
    });

In the javascript I just want to get the data-id of the button that is calling the function, something like:

$(this).data(id);

Here is link to jsfiddle/full code: http://jsfiddle.net/mswyxp0u/

nardnob
  • 909
  • 13
  • 23
Omer Farooq
  • 3,754
  • 6
  • 31
  • 60

1 Answers1

2

I can think of a solution. So here it is : Firstly set the singleton option for confirmation to true. Setting it to true will result in :

Set true to allow only one confirmation to show at a time.

When the newest confirmation element is clicked, the older ones will disappear.

Now we know that only one confirmation box will appear at one time. So now create a global variable to store last clicked delete button attribute for id(data-id). Now bind a event to click of that delete then store data-id inside global variable as you can use easily $(this).data("id") in click event.

Now use this global variable inside onConfirm or onCancel as you can confirm/cancel only after clicking delete button and now if only one confirmation box will appear at a time that means the confirm/cancel callback will be for last clicked button only.

Working demo : https://jsfiddle.net/mswyxp0u/8/

Zeus
  • 1,235
  • 12
  • 20