As the title suggests, I want to add the Enter key as an event handler for Bootbox.js. When you an alert() popup is called, you can press enter to dismiss it, but that is not the case with Bootbox.js. I do not know how to get access to the button inside Bootbox.js to add an event handler. Any suggestions?
In order for the button to take focus, it should be defined with the "btn-primary" class name:
className:
main: {
className: "btn-primary", ...
}
I see this post has no answer yet for case when user has focus in the form itself
Here's how to do it :
Code :
$(document).on("submit", ".bootbox form", function(e) {
e.preventDefault();
$(".bootbox .btn-primary").click();
});
bootbox.dialog({
title : "Title",
message : $("#templateWithForm").html(),
onEscape : true,
buttons :
{
success : {
label : "OK",
className : "btn-success btn-primary",
callback : function() {
// do something...
}
}
}
})
Explanation :
First bit of code will catch the "submit" event for all bootbox dialogs with forms in it and prevent the submit with preventDefault() it will then emulate a click on the button that has className : "btn-primary"
(Note that it's going to trigger a click to all bootbox dialogs so you might wanna change it for your use case if you have more than a dialog on the page at once)
Second bit of code is a simple dialog calling. Important parts are
onEscape : true if you want to close the dialog with Escape key
className : "btn-success btn-primary" btn-success can obviously be changed to fit your needs
Hope this helps the next person !
You can just add 'bootbox-accept' className for the button you want to click on enter key press.
Example:
bootbox.dialog({
title : "Title",
message : "Your Message",
onEscape : true,
buttons :
{
success : {
label : "OK",
className : "btn-success bootbox-accept",
callback : function() {
// do something...
}
},
cancel:{
label : "Cancel",
className : "btn-danger",
callback : function() {
// do something...
}
},
}
})
use btnclassName and assign "btn-primary as below in code
function ShowpopUp() {
bootbox.confirm({
size: "Large",
btnclassName: "btn-primary",
title: "Guests from outside your organization",
message: "The following recipients are from outside of the SPSG organization:<br> <br> "
+
getSelectedNonMembersEmails()
+ "<br> <br> Are you sure you would like to send it?",
callback: function (result) {
if (result === true) {
reportVm.currentPage(4);
}
else {
bootbox.hideAll();
}
}
});
}
Related
So I have a function in a jsp file that uses a dialog to prompt a confirm or cancel message. I then call this function in another jsp page. This would obviously keep displaying the dialog on the first jsp because of the div tag call. So I thought the best way to display this dialog in both jsp's would be to pass in the div tag from each page into the function.
Question
Is it possible to use a function in one jsp, pass in a div tag from another so that it display on the jsp that the function is called on? And how?
function executeConfirmDelete(nodeUniqueId, pageId) {
$( pageId ).dialog({
buttons: [
{
text: "Confirm",
"class" : "btn btn-primary button-width-medium",
click: function() {
$(this).dialog("close");
deleteLANode(nodeUniqueId);
}
},
{
text: "Cancel",
"class" : "btn btn-default",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
//basic css calls here and msgDialog string.
$(pageId).dialog( "option", "title", "Confirm Delete Link" )
.dialog("open")
.html(msgDialog);
}
I've just started to study bootstrap and I'd like to ask a question about it.
I'm using "bootstrap confirmation" referenced with URL below.
https://github.com/mistic100/Bootstrap-Confirmation/blob/master/example/index.html
I'm trying to use custom button of bootstrap confirmation
and i have a click function for this button as well.
but the problem is when i clicked the button it automatically show confirm box.
I wanted to show it when i call the function,
$("#button_id").confirmation("show");
as before I show confirm box i have to check the validation and get the result first...
Is there any way to do it? ..
ex)
$("#button_id").confirmation({
rootSelector: '',
container: 'body',
buttons: [
{
class: 'class',
value: 'YES',
label: 'YES',
onClick:function(){
}
}
]
});
HTML
<button id="bt1" class="btn btn-default" >Confirmation 1</button>
JS
$("#bt1").click(function() {
var test = prompt("test");
if( test == "test" )
{
$('#bt1').confirmation("show");
}
});
Hope this helps. :)
function validate() {
return true;
}
$('#id').click( function() {
var valid = validate();
if(valid) {
$('#id').modal('show');
}
});
I have two date pickers, from date and to date, and a delete button.
On click of delete, validation should be done if from date is greater than to date and etc then the delete-confirmation popover should come displaying yes or no.
If clicked on yes, the delete callback should be called else it will return false!
How to do so??
Any help would be appreciated
This is my code
"#Delete click": function(el, ev) {
this.validate();
this.confirmation("#Delete", "Are you sure?", "Yes", "No", this.deleteConfirmCallback, this);
},
confirmation: function(element, text, yesText, noText, yesCallback, context) {
$(element).confirmation({
title: text,
singleton: true,
popout: true,
btnOkClass: "btn btn-sm default-color",
btnCancelClass: "btn btn-sm primary-color text-case ",
btnOkLabel: yesText,
btnCancelLabel: noText,
btnOkIcon: "glyphicon-tiny glyphicon-ok",
btnCancelIcon: "glyphicon-tiny glyphicon-remove",
onConfirm: function() {
yesCallback(context, this);
}
});
},
Blockquote
For the first time click I'm not able to get that delete-confirmation popup
Blockquote
Try some thing like this:
if('#btn').click(function(){
if($('#fromDate').val() > $('#toDate').val())
// You can also make a function to check this and call it here
{
// Open delete confirm
// Check if user select OK or cancel and make an ajax call to delete if use select delete option
}
});
you may try like this:
var from_date = $("#from_date").val();
var to_date = $("#to_date").val();
if(from_date > to_date) {
//true condition statement
// should be alert or confirmation
} else {
//false condition statement
// should be alert or confirmation
}
Guys I have 2 questions which is i think related in some ways I guess. First:
What is the difference between these two:
$(document).on('click','#someselector', function() {
//do something
});
vs this
$('#selector')on('click', function(){
/do something
});
Sometimes both works, sometimes it doesn't.
Number 2 question:
I created a jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
So as you can see, the id is passed to the function, many will call this dialog and pass a unique id to it. The id will then be assigned only to the Ok button.
So when i call this function to load a unique dialog:
add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");
When i press ok with this code:
$(document).on('click','#my-unique-dialog-id', function () {
//Do some ajax call here
});
I get this JS error: TypeError: s is undefined
But the ajax is successful. I just want to know what that error is.
So when I say it is related to the first question is because when i replace the click code with this:
$('#my-unique-dialog-id').on('click', function () {
//Do some ajax call here
});
It doesn't work anymore.
Thanks
$(document).on('click', 'someselector', function() ...);
is delegation syntax. It allows you to bind a handler to elements that may not exist at the time that you execute the code. See:
Event binding on dynamically created elements?
$('someselector').on('click', function() ...);
only binds the handler to the element(s) matching the selector at the time you execute this code.
I marked the first answer correct because I know I did not put enough info on how to debug the second question, but In case someone might encounter the same error i had, I found out why. So when you initialize your jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
Make sure to include the click event of the buttons like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok',
click : function () {
//include the click event, even if you have nothing to put here.
}
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
I'm trying to submit a dialog form when the user presses enter. I had the form setup as below:
$("#band-dialog-form").dialog({
buttons : {
"Save" : function(){
$(this).dialog("close");
$("#editBandForm").submit();
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
}
});
When I added the key listener I changed to:
"Save" : function submitBand(){
$(this).dialog("close");
$("#editBandForm").submit();
},
But my key listener can't find the function submitBand. If I try and pull the function out of the dialog and make it:
"Save" : submitBand(),
The submitBand function is called on initialization and the page is sent without the user doing anything. What is the propper way to used named functions in the buttons object?
You are assigning the result of executing submitBand to the "Save" key, as the parentheses following submitBand (or "function call" construct) means "execute this function object and return the result". Try passing the function object without the function invocation construct:
"Save" : submitBand,
You should do:
var submitBand = function(){
$("#band-dialog-form").dialog("close");
$("#editBandForm").submit();
};
and thenn pass a reference to the function to the button:
$("#band-dialog-form").dialog({
buttons : {
"Save" :submitBand ,
"Cancel" : function() {
$(this).dialog("close");
}
},
close : function() {
}
});