I'm using Bootstrap 4 Beta and JavaScript for my university project, I'm making some calendar event function. and I'm used Bootbox.js for popup, my issue is When I click the calendar event alert is display but this alert cant customize ,I want to know how to added <div> <button> text and etc for this alert, look my attached image, you can understand it
This is my script,
event
dp.events.list = [{
start: "2017-12-20",
end: "2017-12-28",
id: "1",
resource: "A",
text: "Mahesh",
backColor: "#70CB85",
},
click
dp.onEventClicked = function(args) {
bootbox.alert(" " + args.e.text()); //Alert
};
As from their documentation:
An alert callback should not supply an argument; it will be ignored
If you want to pass a button you can use confirm:
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) {
// ...
}
});
Or use Dialog:
bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })
you can put html in alert easily .
bootbox.alert("Your message <b>here…</b>")
see this link for more option of alert
Currently working on a personal project. I want the user to click a button and a SweetAlert prompt would be presented for the user to verify their credential. However, the code I see on the SweetAlert website only allows one input field. Here is the code I have:
swal({
title: "Authenicating for continuation",
text: "Test",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// swal("Nice!", "You wrote: " + inputValue, "success");
});
So, is there a way I can get two input fields? One input field for the password and the other input field for text.
Now SweetAlert2 is available:
https://sweetalert2.github.io
As per their info on bottom:
Multiple inputs aren't supported, you can achieve them by using html
and preConfirm parameters. Inside the preConfirm() function you can
pass the custom result to the resolve() function as a parameter:
swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
])
})
},
onOpen: function () {
$('#swal-input1').focus()
}
}).then(function (result) {
swal(JSON.stringify(result))
}).catch(swal.noop)
Multiple inputs aren't supported, you can achieve them by using HTML and preConfirm parameters.
Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:
function sweetAlert(){
(async () => {
const { value: formValues } = await Swal.fire({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('swal-input1').value,
document.getElementById('swal-input2').value
]
}
})
if (formValues) {
Swal.fire(JSON.stringify(formValues))
}
})()
}
body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9.3.4/dist/sweetalert2.all.min.js"></script>
<button onclick="sweetAlert()">Try me!</button>
Source: INPUT TYPES
You can have inputs in the default SweetAlert type, as long as you set the html property to true. The issue is that unless the type is set to "input", SweetAlert adds a display: none to input fields.
It's a bit of a workaround, but you can change this in the js file from
<input type=\"text\" tabIndex=\"3\" />\n
to
<input id=\"swalInput\" type=\"text\" tabIndex=\"3\" />\n
And change the css file from
.sweet-alert input {
to
.sweet-alert #swalInput {
Then you can simply add your html to the text parameter when calling, like so:
swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>"
});
This method simply specifies that the only input to be styled that way is the one generated by SweetAlert, so that any inputs you add to your text won't be affected by that styling.
Using the example posted by Tikky in their answer above and based on the question asked for validation on that answer. You could possibly try the following to implement validation on this method:
swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
// Validate input
if ($('#swal-input1').val() == '' || $('#swal-input2').val() == '') {
swal.showValidationMessage("Enter a value in both fields"); // Show error when validation fails.
swal.enableConfirmButton(); // Enable the confirm button again.
} else {
swal.resetValidationMessage(); // Reset the validation message.
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
]);
}
})
},
onOpen: function () {
$('#swal-input1').focus()
}
}).then(function (result) {
// If validation fails, the value is undefined. Break out here.
if (typeof(result.value) == 'undefined') {
return false;
}
swal(JSON.stringify(result))
}).catch(swal.noop)
As far as I know you can't do this off-the-shelf. You can either fork and implement, or just use a HTML element as a modal (e.g. as in Bootstrap's modals).
$(document).ready(function(){
$("a").click(function(){
swal({
title: "Teste",
text: "Test:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "User"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("Error");
return false;
}
swal({
title: "Teste",
text: "E-mail:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Digite seu e-mail"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("E-mail error");
return false;
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
});
});
Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters.
Notice that in preConfirm function you can pass the custom result to resolve():
You can do this using such manner:
swal({
title: 'Multiple inputs',
html:
'<h2>Login details for waybill generation</h2>'+
'<input id="swal-input1" class="swal2-input" autofocus placeholder="User ID">' +
'<input id="swal-input2" class="swal2-input" placeholder="Password">',
preConfirm: function() {
return new Promise(function(resolve) {
if (true) {
resolve([
document.getElementById('swal-input1').value,
document.getElementById('swal-input2').value
]);
}
});
}
}).then(function(result) {
swal(JSON.stringify(result));
})
}
The link here: https://limonte.github.io/sweetalert2/
It's very simple through the preConfirm method and using ok button as submission button in sweetalert2
swal.fire({
showCancelButton:true,
html:`input1:<input id="input1" type="text">
input2: <input id="input2" type="text">
input3: <input id="input3" type="text">`,
preConfirm:function(){
in1= $('#input1').val();
in2= $('#input2').val();
in3 = $('#input3').val();
console.log(in1,in2,in3) // use user input value freely
}
})
Here is an example using sweetalert#^2.1.0, showing one way to have multiple input fields. The example uses jQuery, but jQuery is not required for this technique to work.
// ==============================================================
//swal does not block, and the last swal wins
//so these swals are closed by later calls to swal, before you can see them
// ==============================================================
swal("aaa");
swal("bbb");
// ==============================================================
//for multiple inputs, use content: anHtmlElement
// ==============================================================
const div = document.createElement("div");
console.log(div);
$(div).html("first<input id='111' value='one'></input></br>second<input id='222' value='two'></input></br>third<input id='333' value='three'></input>");
swal({
title: "Three Inputs",
content: div,
// ==============================================================
//true means show cancel button, with default values
// ==============================================================
buttons: [true, "Do It"]
}).then(value => {
if (value) {
const outputString = `
value is true for confirm (i.e. OK); false for cancel
value: ${value}
` + $("#111").val() + " " + $("#222").val() + " " + $("#333").val();
// ==============================================================
// there are no open swals at this point, so another call to swal is OK here
// ==============================================================
swal(outputString);
} else {
swal("You cancelled");
}
});
alert("swal is not blocking: " + $("#111").val() + " " + $("#222").val() + " " + $("#333").val());
Try this way
swal({
text: 'First Input',
content: "input",
button: {
text: "Add New",
closeModal: false,
},
})
.then(name => {
swal({
text: 'Second Input',
content: "input",
button: {
text: "Add New",
closeModal: false,
},
}).then(id => {
//save code here.
})
}).catch(err => {
swal("Error");
});
On SweetAlert 2.x you can use this vanilla Javascript for getting / setting one input. Yo can chain more elements to content so you can have multiple inputs:
var slider = document.createElement("input");
slider.type = "number";
slider.value = 5;
slider.step=1;
slider.min = 5;
slider.max = 50;
this.swal({
title: 'Request time to XXX',
text: 'Select values',
content: slider,
buttons: {
cancel: "Run away!",
catch: {
text: "Throw Pokéball",
value: slider.value,
},
defeat: true,
}
}).then((value) => {
console.log(slider.value); // Here you receive the input data value
//swal(`You typed: ${value}`);
});
check this out
https://sweetalert2.github.io/
"AJAX request example" + "Chaining modals (queue) example" has inputs and you can work with them
Email and Password login double input boxes in Asp.Net Core MVC with ajax to clear application session and relogin to reassign session. The "sweetModal" function should be called in javascript for application 5mins idle timer trigger for the sweetalert modal popup. Adjust to suit your need. Please note, this applies to SweeetAlert 2.0 of https://sweetalert.js.org/ and jQuery v3.5.1
sweetModal = () => {
swal({
icon: '../../../images/yourlogo.png',
title: 'Relogin',
content: {
element: "input",
attributes: {
placeholder: "Enter username",
},
},
buttons: {
confirm: {
text: "Submit",
value: true,
visible: true,
className: "",
closeModal: false
},
cancel: {
text: "Cancel",
value: null,
visible: true,
className: "",
closeModal: true
},
},
closeOnClickOutside: false,
closeOnEsc: false,
})
.then((user) => {
if (user) {
swal({
icon: '../../../images/yourlogo.png',
title: 'Relogin',
content: {
element: "input",
attributes: {
placeholder: "Enter password",
type: "password",
},
},
buttons: {
confirm: {
text: "Submit",
value: true,
visible: true,
className: "",
closeModal: false
},
cancel: {
text: "Cancel",
value: null,
visible: true,
className: "",
closeModal: true
},
},
closeOnClickOutside: false,
closeOnEsc: false,
})
.then((pwd) => {
if (pwd) {
$.post("/account/refreshsession", { user: user, pwd: pwd }, () => swal(`Successful!`));
//swal(`The returned value is: ${user} ${pwd}`);
}
});
}
});
}
The way I add 2 or more input fields is; I set html to true and use text to write you inputs, just make sure to add the class "show" (display: block) to your inputs. Swal will hide your inputs. Example:
swal({
title: "Test",
html: true,
text: ` <input class="show" tabindex="1" placeholder="">
<input class="show" tabindex="1" placeholder="">
`
}
This is working in my case
swal({
title: "Update Score",
// type: "input",
// inputPlaceholder: "Home",
showCancelButton: true,
// cancelButtonText: "Cancel",
// closeOnConfirm: false,
// closeOnCancel: false
html: true,
text: '<input id="input1" type="text" placeholder="Home" style="display:block !important;"><br><input id="input2" type="text" placeholder="Away" style="display:block !important;">',
},
function () {
in1 = $('#input1').val();
in2 = $('#input2').val();
alert(in1 + " = " + in2)
});
Yes you can!!!
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
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() {
}
}
}
});
}
});
});
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
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
}
}
}
});