mistic100/bootstrap-confirmation

Bootstrap plugin for on-place confirm boxes using Popover

bootstrap-confirmation's Issues

onConfirm and onCancel function

Hi! I saw your plugin and it's awesome feature, but unfortunately, it is now working on my site. can you help me with this?

Not working on dynamically create elements using ajax

#60

Still not working

 window.getDoctocrPage = function() {
startSpin();
$.ajax({
url : '/clinic/doctor/'+clinic,
type : 'GET',
 success : function(data) {
 placeBanner(data.banner[0]);
 placeDept(data.department);
 deptments = data.department;

 placeDoctor(data.doctor);
 stopSpin();
 },
 error: function() {
  stopSpin();
  alert('Error');
}
});
}

function placeEachDept(div,tab) {
div.append(
'<div class="col-md-6" style="height:auto;"><div class="news-post-box">'+
'<i onclick="deleteDepartment('+tab.id+',this)" class="fa fa-lg fa-times pull-right"></i>'+
'&nbsp <i onclick="editDepartment(\''+encodeURI(JSON.stringify(tab))+'\',this)" class="fa fa-lg fa-
   pencil pull-right" data-toggle="confirmation"></i>'+
  '<div class="inner"><h4>Heading: '+tab.name+'</h4><hr><i class="fa '+tab.icon+' fa-5x">
    </i>'+
    '<p>Content: '+tab.description+'</p></div></div></div>'
     );
    }

add to ajax elements

hi
thanks for your plugin
how can i add this to ajax inserted elements ?

Getting console error

I added your bootstrap-confirmation.js file to my assets pipeline: https://github.com/naterex/cheapeats/commit/94265177a3711fa6ad37897fb7f0e29071635b7a

But get Chrome console error that says:
Uncaught SyntaxError: Unexpected token ; bootstrap-confirmation.js?body=1:183

Did I miss a step?

any plans to update this for bootstrap 4?

This is a really nice popover tool! Just spinning up a project and wanted to start with bootstrap 4 and wondering if this is planned? Thanks!

required configuration for always pop

If user click on "Yes" in confirmation dialog, confirmation dialog will never popup again. But what if I required every time user click on button and confirmation dialog pop.
I think this plugin required one more configuration using which this functionality can be achieved.

Version 2.4.0 release is not available through NPM

As of today, four days after release
https://www.npmjs.com/package/bootstrap-confirmation2

Host it in MAXCDN

Host the JavaScript version in https://www.maxcdn.com/

Popout option does not work with Bootstrap v3.3.2

Hi :),

Thanks for this great plugin. I seems there is a bug with popout option when the plugin is used with the latest Bootstrap v3.3.2. I hope you can take a look at this issue.

Thanks.

Popover container:body

Need to add an option, container: body so that ir can be passed to inherit the cool popover feature.

Not working on dynamically create elements using ajax

I am trying to assign bootstrap confirmation to a dynamically created button.
when server respond me with an array of object. I place this object using jquery. To delete this object i have added a button. On clicking this button i want bootstrap confirmation to be display, unfortunately the confirmation box doesn't appear. I have added data-toggle="confirmation" attribute to dynamic elements and also enabled confirmation using js.
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
When i add data-toggle="confirmation" to a static button it works but not from dynamically create elements using ajax

content contains confirmation buttons loaded via ajax call not working

... need to re-init all confirmations after pjax/ajax call
It's very uncomfortable

problem with Bootstrap table

I use with this another plugin:

http://bootstrap-table.wenzhixin.net.cn/

But i can't see the full dialog.
This occur when i put the dialog inside a td.

Install via npm

pls help me to install u nice package this one not present on npmjs.com.

Bootsrap tooltip confirmation on dynamic elements

i applied this plugin on simple page load this worked fine, but not working on dynamically added elements. Please help if anyone knew solution.

Thx !

You saved me a lot of time ;)

Applies hide after hide

Hello! Got a problem where I init the confirmation, click on it and click the no button, if you try to click the button again after you canceled it will not work, once you try again it works, it seems to run the hide event 2 times, first one when you cancel, and once again when you try to click it again. I provide a live demo here:

http://jsfiddle.net/611ym0bd/1/

How to override default option?

How to override default option without modifying the inner code of your plugin ?

Feature: Keyboard Navigation

It would be a really cool feature, if you could select the button with keyboard.

Like the Datepicker: https://github.com/eternicode/bootstrap-datepicker

Space between buttons disappears when click on button

In example\index.html

The space between buttons disappears when I click on a button:

Getting console error

I added your bootstrap-confirmation.js file to my assets pipeline: https://github.com/naterex/cheapeats/commit/94265177a3711fa6ad37897fb7f0e29071635b7a

But get Chrome console error that says:
Uncaught SyntaxError: Unexpected token ; bootstrap-confirmation.js?body=1:183

it does not work in mobile phone

$('[data-toggle=confirmation]').confirmation({ rootSelector: '[data-toggle=confirmation]' });

i just use this code , it works in my web project normal ,but does not works when this project run in mobile phone. i think it cant surppot self-adaption.
wait help.

How to pass param into callback function ?

<i class="fa fa-trash comment-tool post-comment-delete" data-toggle="confirmation" data-popout="true" data-on-confirm="DeleteComment(123)"></i>
I want to pass parameter 123 into function DeleteComment()
How to do it ?
Thank you !

Only works after refresh

When I go to the page with the confirm script in it and press the button it doesnt work, but after refreshing it does... please help. using latest bootstrap and laravel.

settings.blade.php(view)

<button class="btn btn-danger" data-toggle="confirmation"
                                data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-fw fa-trash"
                                data-btn-ok-class="btn-danger" data-bt-cancel-label="Stop"
                                data-btn-cancel-icon="fa fa-fw fa-close" data-btn-cancel-class="btn-info"
                                data-title="Delete account" data-content="Are you sure?"
                                data-placement="bottom" data-popout="true">
                            Delete account
                        </button>

@push('scripts')
<script>
    $(document).ready(function () {
        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm:    function () {
                window.location.href = '/settings/delete';
            }
        });
    });
</script>
@endpush

welcome.blade.php

`<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>

<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<!-- Bootstrap -->
<script src="/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/js/scripts/plugins/bootstrap-confirmation.min.js"></script>`

Original event isn't cancelled when using delegate/selector

I notice that the code to cancel the original click event is not run when a selector option is provided (and $.fn.confirmation is called on some parent element):

https://github.com/mistic100/Bootstrap-Confirmation/blob/master/bootstrap-confirmation.js#L106-L113

Is there a reason that this shouldn't also be run in the delegate situation? (although it would need to pass the selector as the second argument to .on)

In my own code, I have created this event handler myself after calling .confirmation, and everything seems to be working as desired. However it would be nice if this wasn't necessary.

Here's a simplified example of how I am calling it:

$('body').confirmation({
  selector: '[data-toggle=confirmation]'
});

$('body').on('click', '[data-toggle=confirmation]', function(e, ack) {
  if (!ack) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  }
});

Open confirm box only on doubleclick

How can i set the confirm box to appear only on double click event. My current code for popup is:

`$('[data-toggle=confirmation]').confirmation({

                'onConfirm': function () {
                    var prinLink = $(this).find('td:eq(10)').find('a:eq(1)');
                    prinLink.trigger('click');
                },
                title: 'Print Details?',
                singleton: true,
                popout: true,
                placement: 'top'
            });`

Absolute positioning issue?

When I click the button, the popup gets cut off. I am not skilled in CSS enough to fix this. Here is a screen shot.

Here is the underlying HTML for the button.

                        <div class="col-sm-2 col-xs-6">
                            <a class="btn btn-primary btn-xs btn-block" href="@Url.Action("Details", "Rentals", new { id = item.Header.RentalId, hash = HashHelper.Get(item.Header.RentalId.ToString()) })">
                                Edit<span class="hidden-xs"> Listing</span>
                            </a>
                            <button class="btn btn-danger btn-xs btn-block" data-toggle="confirmation" data-singleton="true" data-id="@item.Header.RentalId"
                                    data-btn-ok-label="Yes" data-btn-ok-class="btn-success" data-btn-cancel-label="No" data-btn-cancel-class="btn-danger" data-content="Remove this listing?">Deleeete me</button>
                            <a class="btn btn-danger btn-xs btn-block" href="#" data-toggle="confirmation" data-singleton="true" data-id="@item.Header.RentalId">
                                Remove<span class="hidden-xs"> this listing</span>
                            </a>
                        </div>

Any thoughts?

Send item id with data-on-confirm

Hello,

I want to send the item id with data-on-confirm:
data-on-confirm="my_delete_func(4)"

In above line, '4' is the data I want to send for my function my_delete_func()

now on JS, I have:
function my_delete_func(item_id){ alert(item_id); }
It's not working, how can I achieve this?

jsがhttpなためGoogleマップが読み込まれない

censored

Doesn't work with forms

There doesn't seem to be any support for forms. I'd like to have the confirmation before a form is submitted like so and it doesn't work

<form action="/data/delete" method="POST">
    <input type="hidden" name="data" value="someValue">
    <button class="btn btn-danger" type="submit"
        data-toggle="confirmation" data-placement="left" data-title="Move To Trash?" 
        data-btn-ok-label="OK" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success"
        data-btn-cancel-label="Cancel" data-btn-cancel-icon="icon-close" 
        data-btn-cancel-class="btn-danger">
            Delete
    </button>
</form>

Popout + Singleton

Hi,

Is it possible to have popout + singleton options together?

(Thanks for great component!)

jQuery 3.1.0: popout and singleton features not working

These features are not currently working in the current latest jQuery release 3.1.0 (have confirmed that they do work with my configuration with jQuery 2.2.4).

This appears to be due to this.selector being undefined here:
https://github.com/mistic100/Bootstrap-Confirmation/blob/master/bootstrap-confirmation.js#L289

Thank you for the plugin by the way.

feature request autoposition and reposition

hi

could you use this https://github.com/tlindig/position-calculator to autoposition / reposition the confimation box ?

best regards

Allow to stop the default action inside confirmed.bs.confirmation

I would like to call an AJAX request when accepting the confirmation. For this purpose I would like to stop the propagation of the event when capturing the 'confirmed.bs.confirmation', but it seems that this is not possible.

option trigger always equals to 'click', but I want set trigger to hover

Prevent original event not working on delegated with selector option

When I use the selector option to delegate the plugin initialization, prevent the original event isn't working.

This is not working:

var confirmOptions = {
    'title': function () {
        return $(this).data('mensaje');
    },
    'btnOkLabel': 'Aceptar',
    'btnCancelLabel': 'Cancelar',
    'singleton': true,
    'placement': 'left',
    'container': 'body',
    'selector': '[data-toggle=confirmation]'
};
$('body').confirmation(confirmOptions);

This works:

var confirmOptions = {
    'title': function () {
        return $(this).data('mensaje');
    },
    'btnOkLabel': 'Aceptar',
    'btnCancelLabel': 'Cancelar',
    'singleton': true,
    'placement': 'left',
    'container': 'body'
};
$('[data-toggle=confirmation]').confirmation(confirmOptions);

Sorry for my bad English.

Release 2.3.0 - A element does not fire href

I just downloaded the 2.3.0 version and when you click on an A tag with a valid href attribute, the url is not fired. I do not have any jquery events attaced this this tag such as on()

Only copy href on confirmation can change the application behaviour

Hi.

I try to use your code with Rails in order to have confirmation when i delete my object.

With rails, to delete an object, i have a link like this :

<a rel="nofollow" data-method="delete" href="/my_model/1">Remove</a>

This simulate an HTTP delete request for rails.

Unfortunately, with your code, the confirm link is :

   <a href="/my_model/1" target="_self">Remove</a>

And this become a simple get request. The behavior is changed.

One solution will be to copy all the attributes except those used by this plugins.

What do you think about?

template option is not working

Hello,

the template option of bootstrap is not working to define a custom popover template for the confirmation. it loads the whole thing but the buttons don't show up if we define the template as an option in this plugin.

How to distinguish in OnConfirm event which button was pressed

If I have an array of similar buttons which trigger different actions. How can I distinguish which button was clicked and confirmed with in the same OnConfirm event.

Compatability with other plugins?

Hi,

Just curious if you have any tips for getting bs-confirmation to work with jQuery Datatables. I can get the confirmation button to display in the table. Only, nothing happens when I actually click the button. I don't see any errors in the console. When I placed the button in a basic html table (without using jQuery Datatables), it worked normally. Thanks.

var table = $('#historyTable').DataTable({
        "columnDefs": [
          {
            "render": function (data, type, row) {
              return   ' <button type="button"id="example" class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true" data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt" data-btn-ok-class="btn-success" data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle" data-btn-cancel-class="btn-danger">Confirmation</button>';
            },
            "targets": 0
          }
        ]
      });�

onConfirm and onCancel do not accept parameters

Hi,

A suggestion to change Confirmation.prototype.getOnConfirm and getOnCancel and getFunctionFromString as follows to allow for a new element data-on-confirm-args and data-on-cancel-args to allow parameters to be passed to the functions called such as...

<button type="button" class="btn btn-normal btn-xs btn-link btn-del" data-toggle="confirmation"data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt" data-btn-ok-class="btn-success" data-btn-cancel-label="Stop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle" data-btn-cancel-class="btn-danger" alt="Delete Record" title="Delete Record"  data-on-confirm="onDelete()" data-on-confirm-args="' + full['id'] +'" ><i class="fa fa-trash-o"></i> Delete</a>

Confirmation.prototype.getOnConfirm = function () {
        if (this.$element.attr('data-on-confirm')) {
            return getFunctionFromString(this.$element.attr('data-on-confirm'),this.$element.attr('data-on-confirm-args'));
        }
        else {
            return this.options.onConfirm;
        }
    };

    Confirmation.prototype.getOnCancel = function () {
        if (this.$element.attr('data-on-cancel')) {
            return getFunctionFromString(this.$element.attr('data-on-cancel'),this.$element.attr('data-on-cancel-args'));
        }
        else {
            return this.options.onCancel;
        }
    };

    /*
     * Generates an anonymous function from a function name
     * function name may contain dots (.) to navigate through objects
     * root context is window
     */
    function getFunctionFromString(functionName,args) {
        var
            namespaces = functionName.split('.'),
            context = window,
            func = namespaces.pop().replace("()","");
        for (var i = 0, l = namespaces.length; i < l; i++) {
            context = context[namespaces[i]];
        }

        return function () {
            context[func].call(this, args);
        };
    }

Can't preview plugin functionality on Github pages

Trying to see what the plugin does at http://mistic100.github.io/Bootstrap-Confirmation/ throws an error in the console log (in Developer tools) saying that the JS script cannot be executed. I believe you can use relative paths to include the JS of this plugin to fix this.

Please let me know when it's fixed so that I can add it to Bootsnipp!

confirmation can not rebind after destroy it

rt

possibility to add multiple items

i am planning to use this plugin to show action items against an entry
Possible actions are 1. Approved 2. Rejected 3.Need review 4. Duplicate 5.Decide later
So can i add custom options like this and call an endpoint for every option ?

Fails to initialize for an element without an id

Looks like this is because the definition for Confirmation.prototype.getUID is missing

Event type specified on web is wrong

Hello,

I tried to use this and found that the event type provided on web http://mistic100.github.io/Bootstrap-Confirmation/ as "cancelled.bs.confirmation" which in fact should be "canceled.bs.confirmation"
May help some one.
Thanks

Some bugs with Bootstrap 3.0.0

Hi,

I encountered some bugs with Bootstrap v3.0.0. For one, console shows this error:
Uncaught TypeError: this.getUID is not a function

Strangely, when used in my asp.net mvc app I did not get this console message, however I was running into some behaviour bugs. When I upgraded to 3.3.7 the behaviour bugs no longer occurred.

Add npm package

Beside bower I'd like to see a npm version available. Could you publish it to npmjs?

It will take only those 1 step just to make it available.

npm publish

Confirmation popover doesn't appear unless it is clicked twice in bootstrap v3.3.5

Seems to be an issue with bootstrap v3.3.5.

1. Click on button to popover confirmation. (working)
2. Click No.
3. Click on button to popover confirmation again (not working)
4. Click on button to popover confirmation second time (working)

Didn't have this issue in earlier bootstrap v3.3.4