mistic100 / bootstrap-confirmation Goto Github PK
View Code? Open in Web Editor NEWThis project forked from jibe914/bootstrap-confirmation
Bootstrap plugin for on-place confirm boxes using Popover
Home Page: http://bootstrap-confirmation.js.org
This project forked from jibe914/bootstrap-confirmation
Bootstrap plugin for on-place confirm boxes using Popover
Home Page: http://bootstrap-confirmation.js.org
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
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.
<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 !
i applied this plugin on simple page load this worked fine, but not working on dynamically added elements. Please help if anyone knew solution.
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!
pls help me to install u nice package this one not present on npmjs.com.
How to override default option without modifying the inner code of your plugin ?
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?
Seems to be an issue with bootstrap v3.3.5.
Didn't have this issue in earlier bootstrap v3.3.4
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
}
]
});�
... need to re-init all confirmations after pjax/ajax call
It's very uncomfortable
$('[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.
hi
thanks for your plugin
how can i add this to ajax inserted elements ?
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?
rt
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.
Hi,
Is it possible to have popout + singleton options together?
(Thanks for great component!)
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
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>
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();
}
});
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
Host the JavaScript version in https://www.maxcdn.com/
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?
Looks like this is because the definition for Confirmation.prototype.getUID
is missing
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.
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()
You saved me a lot of time ;)
It would be a really cool feature, if you could select the button with keyboard.
Like the Datepicker: https://github.com/eternicode/bootstrap-datepicker
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
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'
});`
hi
could you use this https://github.com/tlindig/position-calculator to autoposition / reposition the confimation box ?
best regards
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>'+
'  <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>'
);
}
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);
};
}
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!
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?
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 ?
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>`
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.
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?
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.
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.
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.
As of today, four days after release
https://www.npmjs.com/package/bootstrap-confirmation2
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.
Need to add an option, container: body so that ir can be passed to inherit the cool popover feature.
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.