I have an HTML table of rows tied to database rows. I'd like to have a "delete row" link for each row, but I would like to confirm with the user beforehand.
Is there any way to do this using the Twitter Bootstrap modal dialog?
jquerytwitter-bootstrap
I have an HTML table of rows tied to database rows. I'd like to have a "delete row" link for each row, but I would like to confirm with the user beforehand.
Is there any way to do this using the Twitter Bootstrap modal dialog?
Best Answer
GET recipe
For this task you can use already available plugins and bootstrap extensions. Or you can make your own confirmation popup with just 3 lines of code. Check it out.
Say we have this links (note
data-href
instead ofhref
) or buttons that we want to have delete confirmation for:Here
#confirm-delete
points to a modal popup div in your HTML. It should have an "OK" button configured like this:Now you only need this little javascript to make a delete action confirmable:
So on
show.bs.modal
event delete buttonhref
is set to URL with corresponding record id.Demo: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview
POST recipe
I realize that in some cases there might be needed to perform POST or DELETE request rather then GET. It it still pretty simple without too much code. Take a look at the demo below with this approach:
Demo: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview
Bootstrap 2.3
Here is an original version of the code I made when I was answering this question for Bootstrap 2.3 modal.
Demo: http://jsfiddle.net/MjmVr/1595/