PopConfirm doesn't work with Bootstrap 4 and jQuery 3.3.1

[Brian Hall]

PopConfirm is currently not working properly in Bootstrap 4 and jQuery 3.3.1. For example, when trying to employ PopConfirm to confirm a form submission, the form does not submit and the result is an un-closable instance of the popover that only goes away when the DOM is refreshed. I'd fix it but I don't know how, and I suspect that it may be due to a change in jQuery.

The Bootstrap 4 changes are easy enough because I think it's mostly just changes to the button names and styling. But, the bigger question is getting forms to submit and removing the popover instance after it is submitted.

[John Abela]

I am using:

• jQuery: 3.3.1
• Bootstrap: 4.1.3
• PopConfirm: 0.4.5

My loading order is:

1. bootstrap.min.css
2. jquery.min.js
3. bootstrap.min.js
4. jquery.popconfirm.js

All is working for me.

[Brian Hall]

Thanks @johnabela for the reply. Hmm, curious that it's working for you. I'll have to do some more fiddling and see if I can share the issue I'm seeing.

[Brian Hall]

I had to modify jquery.popconfirm.js to reflect the accurate button styling, but eventually got it to work with jQuery 3.3.1 and Bootstrap 4.1.3.

[Anael FAVRE]

Can you share with us the modifications you made to improve the package ? :)

[John Abela]

@ifnot - Here is what I did...

Inside the popConfirm: function (options) { I added a new variable/option, after noBtn:'No', called btnColor: 'btn-success' this allows us/me to pass through any different btn color option that bootstrap offers.

Next, within self.popover() the content variable goes from:

content: options.content + '<p class="button-group" style="margin-top: 10px; text-align: center;"><button type="button" class="btn btn-small confirm-dialog-btn-abort">' + options.noBtn + '</button> <button type="button" class="btn btn-small btn-danger confirm-dialog-btn-confirm">' + options.yesBtn + '</button></p>'

to:

content: options.content + '<p class="button-group" style="margin-top: 10px; text-align: center;"><button type="button" class="btn btn-small confirm-dialog-btn-abort">' + options.noBtn + '</button> <button type="button" class="btn btn-small ' + options.btnColor + ' confirm-dialog-btn-confirm">' + options.yesBtn + '</button></p>'

Those are the only changes that I have made.

Usage:

$("[data-toggle='popConfirmation']").popConfirm({title:"Please Confirm!",content:"Final warning…",placement:"top",container:"body",yesBtn:"Confirm",noBtn:"Cancel",btnColor:"btn-danger"});

[Brian Hall]

I changed the styling on the buttons to suit my preferences on line 119 to match the new button names in Bootstrap 4. Also, on line 153, I changed .confirm-dialog-btn-abord to .confirm-dialog-btn-abort

[Brian Hall]

@johnabela, does PopConfirm work for you when confirming an action within a modal?

[John Abela]

@bhall7 - ugh, do I ever hate bootstrap modals. I avoid them like the plague. But, that said, yep, my updated version (call it, 0.4.6, if you want too) does work with the latest bootstrap/jquery/modal.

Here is a JSFiddle showing it works. With the exception of the button that has the id="popConfirmation" (html line # 17, I think) this is code taken directly from the bootstrap website.

I confirmed it worked in Chrome and Firefox, did not test anything else.

[Brian Hall]

I'm still having issues getting PopConfirm to work for me. On the site I'm working on, the buttons are not appearing:

However, I'm unable to replicate the issue on Codeply. I recreated the issue on this Codeply: https://www.codeply.com/go/2BWcRgi8mc I'm now using the following dependencies and updated versions, loading them in the following order:

• Bootstrap CSS 4.3.1
• jQuery 3.3.1
• popper.js 1.14.7
• Bootstrap 4.3.1
• PopConfirm 0.4.5

I'm using the following settings for my confirm button, and I can trigger it, but now I don't get any buttons. When I change the placement setting, it reflects the settings properly, I just can't figure out why the buttons are not there:

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

When I click on the element in Chrome Dev Tools, it simply doesn't show the buttons at all:

There are no errors showing up in the console, either.

Any suggestions would be greatly helpful!

[Brian Hall]

UPDATE: The invisible buttons issue appears to be a new issue introduced with Bootstrap 4.3.1, which addressed some XSS issues. When I revert back to Boostratp 4.2.1, the buttons show up just fine:

I recreated the issue in this Codeply: https://www.codeply.com/go/2BWcRgi8mc

[Brian Hall]

In Bootstrap 4.3.1, they introduced a sanitizer for Tooltips and Popovers (https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer). To allow buttons and get PopConfirm to work, you need to add the following line to your JavaScript file to whitelist buttons:
$.fn.tooltip.Constructor.Default.whiteList.button = []
I updated the Codeply showing this working. Here's a link to the StackOverflow answer: https://stackoverflow.com/questions/54854862/bootstrap-4-3-1-broke-popconfirm/54942434#54942434.