How to confirm a form submission with Bootstrap 3 popovers and jQuery

Question

I have rows of items in a list that each have their own delete button. Before deleting the item, I'd like to use Bootstrap's popovers to display a confirmation before the form is actually submitted:

I used to use the Fast Confirm jQuery plugin for this, but I'm sure there's a simpler, cleaner way to do this without plugins.

I can pass the values from the form to jQuery, and trigger the popover, but I'm not sure how to submit the form based on the responses selected in the popover. Also, whenever another delete button is triggered, it would be preferable to disable any other open popovers. I recognize that this is fundamentally a Javascript/jQuery question, and I would greatly appreciate any help or suggestions.

Here's a Bootply that shows my progress so far: http://www.bootply.com/103376

Thanks!!

Answer 1

I ended up using AnaelFavre's PopConfirm jQuery plugin, which leverages Bootstrap's popover feature. I made some minor edits to the main component, jquery.popconfirm.js (such as changing the buttons to English instead of the default French). It's nice because it handles a form submission or a link click automatically. The only thing I wish it would do is toggle closed any other open popovers when .popConfirm() is triggered. But, I'm sure this could easily be solved.

Usage is pretty simple. To solve my problem above, to confirm a form submission with a Bootstrap popover, use the following example:

HTML:

<form action="yourDeleteScript.php" method="post">
<input type="hidden" name="id" value="100">
<button class="btn btn-default btn-delete" type="submit">Delete</button>
</form>

<script type="text/javascript" src="jquery.popconfirm.js"></script>

JS:

$(".btn-delete").popConfirm({
    title: "Delete Item",
    content: "Are you sure you want to delete this item?",
    placement: "top"
});  

*This is all working using jQuery 1.10.2 and 2.0.3, Bootstrap 3.0.3, and the PopConfirm plugin on 1/2/14 *

Answer 2

Took a little figuring out because the popover was getting appended to body so there can be several in existence, with no direct relation to the button that opened them.

If you don't set the container to body they will get inserted within each form, which helps isolate the instance of popover.

There is an event shown.bs.popover that triggers on the selector that the popover is bound to. Using that event you can isolate everything within the form

var popOpts={
  placement: 'right',
  title: 'Delete Item',
  html: 'true',
  content: 'Are you sure you want to delete this item?<br><button class="btn btn-default popover-submit" type="button">Yes</button><button class="btn btn-default" type="button">No</button>',
  //container: 'body'
}


// Delete button popover confirmation
$(".btn-delete").popover(popOpts).on('shown.bs.popover', function(e) {
  var $delete=$(this)
  var $form=$delete.closest('form')
  var $pop=$form.find('.popover');
  var $popButtons=$pop.find('button').click(function(){
    if($(this).is('.popover-submit')){
      $form.submit();
    }
    $delete.popover('destroy').popover(popOpts);        

  }); 

});

I found a bug trying to use popover('hide') where it was causing overlap of another popover , yet not visible, and the buttons wouldn't work. Workaround was to destroy and recreate popover so it is removed from DOM each time

NOTE: See added class for popover Yes button

DEMO