PreventDefault in bootstrap confirmation doesn't work

Question

When I use this code:

$(function() {
            $('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {
                e.preventDefault();

                // Do Ajax Here
                var ZoneId = 1;
                var value = 1;
                var published_at = $('#published_at').val();
                $.ajax({
                    type: "POST",
                    url: host + '/zone/toggleEnable',
                    data: {id: title, value: body},
                    success: function( msg ) {
                        alert('success');
                        //$("#ajaxResponse").append("<div>"+msg+"</div>");
                    }
                });

            });

        });

and i click on Yes in the confirmation popup, the e.preventDefault() doesn't work and the whole page reloads which is not a desired behavior since i need to call the ajax. Why is this happening ? How i can solve this ?

Answer 1

Your callback function is missing its event parameter. Try replacing this:

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {

with this:

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function (e) {

Note the addition of the e argument, which is now available to you on the next line:

e.preventDefault();

Answer 2

Don't know how i figured it out but I was able to initialize my own confirmation custom box in the bootstrap confirmation initialization script. I replaced the anchor with a button and it worked:

$('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]',
        btnOkClass: 'btn btn-sm btn-success',
        btnCancelClass: 'btn btn-sm btn-danger',
        template: '<div class="popover confirmation">' +
        '<div class="arrow"></div>' +
        '<h3 class="popover-title"></h3>' +
        '<div class="popover-content">' +
        '<p class="confirmation-content"></p>' +
        '<div class="confirmation-buttons text-center">' +
        '<div class="btn-group">' +
        '<button class="btn" data-apply="confirmation"></button>' +
        '<a href="#" class="btn" data-dismiss="confirmation"></a>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>'});