JSFiddle Link:
The bootbox.alert should show up before the bootbox.dialog. I've preloaded all the libraries into the JSFiddle. I want the bootbox.dialog to show up once the bootbox.alert has been clicked on.
Check it out here
Bootbox defined their functions here, and as you can see they include a callback. For example:
bootbox.alert(message, callback)
The callback gives you the option to only run certain code once this line is completed. This solves your problem.
JS
$(document).ready(function () {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", function () {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function () {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function () {
}
},
}
});
});
});
});
The 2nd parameter to bootbox.alert is a function that will be called after the alert is dismissed. Launch the dialog in that function.
$(document).ready(function() {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", showDialog);
function showDialog() {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function() {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function() {
}
}
}
});
}
});
});
Related
I am trying to use Bootbox within an Angular2 application. I have the following code:
bootbox.confirm({
message: "Are you sure you want to complete this action?",
buttons: {
confirm: {label: 'Yes', className: 'btn-success'},
cancel: {label: 'No', className: 'btn-danger'}
},
callback: function (result: any) {
console.log('Response equals: ' + result);
}
});
The confirm box displays correctly when called and when clicking on either the "yes" or "no" button the confirm box disappears as it should. However, the callback function is not firing because I'm not getting the console message.
This is my first attempt trying to inject Bootbox into an application so I'm not sure why the callback function is not being called.
Any ideas?
Have you tried with function(result) remove ':any'.
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
http://bootboxjs.com/examples.html#bb-confirm-dialog. Call back takes only one argument that is result.
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
I am trying to use $ionicActionSheet to execute a function. Moreover, in the example below, I want to call doSomethingElse() when the user clicks on first option to "do something else". I can execute commands within the function buttonClicked() succesfully, but it does not want to call the functions outside.
// within controller
$scope.doSomethingElse = function(textStr) {
window.alert(textStr)
}
$scope.showActions = function(friendName) {
$ionicActionSheet.show({
buttons: [
{ text: 'do something else },
{ text: 'do something' },
],
destructiveText: 'View all',
titleText: '<h4>' + friendName + ' </h4>',
cancelText: 'Cancel',
buttonClicked: function(index, $scope) {
if(index==0) {
// window.alert("Hello"); works fine
$scope.doSomethingElse("Index 0")
}
if(index==1) {
// window.alert("Hello"); works fine too
$scope.doSomethingElse("Index 1")
}
return true;
},
destructiveButtonClicked: function() {
window.alert("Hey All");
return true;
}
});
}
Replace the following:
buttonClicked: function(index, $scope) {
With:
buttonClicked: function(index) {
Or rename the second argument to for example:
buttonClicked: function(index, button) {
Otherwise it will overwrite the $scope variable. The second argument that gets passed to the buttonClicked function is not the $scope, it's the button object.
In Bootbox 3.2.0, I was able to use confirm with strings passed as below:
bootbox.confirm(
confirm_string,
cancel_string,
yes_string,
function(r) {
if (r) {
//do something
}
}
);
I am upgrading to 4.1.0 and I got errors with the above function call.
According to the documentation (http://bootboxjs.com/documentation.html) of Bootbox 4.1.0, there are two ways to call confirm:
bootbox.confirm(str message, fn callback)
bootbox.confirm(object options)
I tested the fist way with the message string and a callback function and it works. For the second way, I was able to pass an object as follows:
{
message: message_string
callback: function(r) {
//do something
}
}
How can I pass strings for OK, Cancel buttons in the second way?
Thanks and regards.
As an alternative this can also be done directly with bootbox.confirm, like so:
bootbox.confirm({
buttons: {
confirm: {
label: 'Localized confirm text',
className: 'confirm-button-class'
},
cancel: {
label: 'Localized cancel text',
className: 'cancel-button-class'
}
},
message: 'Your message',
callback: function(result) {
console.log(result);
},
title: "You can also add a title",
});
OR use localization - option, to change ALL Buttons per Default:
bootbox.setDefaults({
/**
* #optional String
* #default: en
* which locale settings to use to translate the three
* standard button labels: OK, CONFIRM, CANCEL
*/
locale: "de"
});
seen: http://bootboxjs.com/documentation.html, "Helper methods"
You can use the "Custom dialog" (bootbox.dialog) to change these strings.
bootbox.dialog({
message: "Custom message",
title: "Custom title",
buttons: {
danger: {
label: "Custom Cancel",
className: "btn-danger",
callback: function() {
//do something
}
},
main: {
label: "Custom OK",
className: "btn-primary",
callback: function() {
//do something else
}
}
}
});