Darwin Allen Darwin Allen - 4 months ago 60
Javascript Question

Bootstrap-confirmation not respecting options

Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them

singleton
and
data-popout
options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.

I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.

My JS is loaded after all other libraries and is in my
custom.js
file in my footer.

JS is as follows:

$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});


An example of the box implemented on a button in my HTML is the following:

<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>


Any pointers would be appreciated. I even changed the default options in the
bootstrap-confirmation.js
file itself to what I want and still no luck.

Answer

Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.

// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
    last_clicked_id = $(this).data("id");
    last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
    singleton: true,
    popout: true,
    onConfirm: function () {
        alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
        // TODO: Add AJAX to wipe entry and refresh page
    },
    onCancel: function () {
        alert("DEBUG: Delete canceled for id : " + last_clicked_product);
    }
});

I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.