CODEWITHSUNDEEP
bootstrap-modalconfirmationbootstrap-popover
Raja Manickam
Raja Manickam

Reputation: 1903

How to use the bootstrap confirmation within the bootstrap modal box?

I want to use the bootstrap confirmation http://ethaizone.github.io/Bootstrap-Confirmation/#example within the bootstrap modal box.

However while calling the modal box I'm calling the modal box by ajax post method. And while calling the modal box I also include some scripts but its not working.

The scripts I have sent in the jquery is http://www.jqueryscript.net/other/Clean-jQuery-Confirmation-Dialog-Plugin-with-Bootstrap-Popovers-Bootstrap-Confirmation.html

Used this script within the modal box window...

<script>
            $(function(){
                $('[data-toggle="confirmation"]').confirmation();
                $('[data-toggle="confirmation"]').confirmation({
placement: 'top', // How to position the confirmation - top | bottom | left | right
trigger: 'click', // How confirmation is triggered - click | hover | focus | manual
target : '_self', // Default target value if `data-target` attribute isn't present.
href   : '#', // Default href value if `data-href` attribute isn't present.
title: 'Are you sure?', // Default title value if `data-title` attribute isn't present
template: '<div class="popover">' +
                '<div class="arrow"></div>' +
                '<h3 class="popover-title"></h3>' +
                '<div class="popover-content text-center">' +
                '<div class="btn-group">' +
                '<a class="btn btn-small" href="" target=""></a>' +
                '<a class="btn btn-small" data-dismiss="confirmation"></a>' +
                '</div>' +
                '</div>' +
                '</div>',
btnOkClass:  'btn-primary', // Default btnOkClass value if `data-btnOkClass` attribute isn't present.
btnCancelClass:  '', // Default btnCancelClass value if `data-btnCancelClass` attribute isn't present.
btnOkLabel: '<i class="icon-ok-sign icon-white"></i> Yes', // Default btnOkLabel value if `data-btnOkLabel` attribute isn't present.
btnCancelLabel: '<i class="icon-remove-sign"></i> No', // Default btnCancelLabel value if `data-btnCancelLabel` attribute isn't present.
singleton: false, // Set true to allow only one confirmation to show at a time.
popout: false, // Set true to hide the confirmation when user clicks outside of it.
onConfirm: function(){}, // Set event when click at confirm button
onCancel: function(){}}) // Set event when click at cancel button

            });
        </script>

Upvotes: 2

Views: 6826

Answers (2)

Michal Olszowski
Michal Olszowski

Reputation: 805

If your modal is called by ajax you have to know that elements inside modal box are delegeted elements.

Look here at chapter Direct and delegated events https://api.jquery.com/on/

Propably then you should use it like that:

$(document).find('[data-toggle="confirmation"]').confirmation();

This way you can access delegated elements added by javascript or in ajax actions.

Upvotes: 1

biplob
biplob

Reputation: 1272

I've just made a demo for you. It may help you. Please, check the following fiddle - http://bit.ly/1aD42Y8

Upvotes: 2

Related Questions