I can set inputType as password. What are the other input Types supported..?
swal({
title: "Are you sure?",
type: "input",
inputType: "checkbox",
showCancelButton: true,
closeOnConfirm: true,
}, function () {
swal("", "You did it", "success");
});
the checkbox inputType is not supported in swal..
There's a nice way to use checkbox modal type in SweetAlert2:
Swal.fire({
title: 'Do you have a bike?',
input: 'checkbox',
inputPlaceholder: 'I have a bike'
}).then((result) => {
if (result.isConfirmed) {
if (result.value) {
Swal.fire({icon: 'success', text: 'You have a bike!'});
} else {
Swal.fire({icon: 'error', text: "You don't have a bike :("});
}
} else {
console.log(`modal was dismissed by ${result.dismiss}`)
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
PS. notice that SweetAlert2 is a little bit different from SweetAlert, check the simple migration guide: https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
Related
SweetAlert icon not working properly
Here my code:
function test(processID){
swal.fire({
title: 'alert?',
text: "Click Proceed!",
icon: '',
customClass: 'swal-wide',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'test!'
}).then((result) => {
if (result.isConfirmed) {
window.location = "<?=base_url('test/test1/')?>"+processID;
}
});
}
I am creating a component with a button show a popup using vue-sweetalert2.
In the popup, there are have 2 buttons that I want to display multiple language
(I am using i18n for multiple language for every word in template tag but the popup texts are in script->export default->method)
methods:{
openAlert(){
this.$swal({
title: 'Confirm Popup',
text: "File name is duplicate \n What do you want?", //<--here i want multiple language
showCancelButton: true,
cancelButtonText: 'Replace file', //<-- here
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Cancel upload' // <--- here
})
},
}
Please help me! I'm new in JS
You can try setting a select in alert as shown below.
this.$swal({
title: 'Confirm Popup',',
input: 'select',
inputOptions: {
'1': 'Value 1',
'2': 'Value 2',
'3': 'Value 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value !== '') {
resolve();
} else {
reject('You need to select a Value');
}
});
}
}).then(function (result) {
if (result.value) {
this.$swal({
type: 'success',
html: 'You selected: ' + result.value
});
}
});
You can also refer to the example in official documentation.
I have a Yes and No button in my SweetAlert2. When I click on No it does a post to a method but I just want it to close the SweetAlert.
Here is the code I have written:
$('.js-update-details-click').click(function () {
var Id = Number($(this).data('result-id'));
swal({
title: 'Are you sure you want to ask the User to update their details?',
type: 'warning',
showCancelButton: true,
closeOnConfirm: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
confirmButtonClass: 'btn btn-success btn-full-width mar-bot-5',
cancelButtonClass: 'btn btn-danger btn-full-width mar-bot-5',
buttonsStyling: false
})
.then(function (isconfirm) {
if (isconfirm) {
$.ajax({
type: "POST",
url: '/Common/ComposeUpdateDetailsEmail',
data: { ReplyType: 'CleanUpdateDetails', Id: Id },
success: function (data) {
swal('User has been sent an email to Update their Details.')
}
});
}
});
}
);
Most probably you updated the sweetalert2 dependency to ^7.0.0 and didn't read the release notes with breaking changes: https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0
Starting from v7.0.0, SweetAlert2 will fulfill the promise for both confirm and cancel buttons and you need to handle the response from it this way:
Swal.fire({
...
}).then(function (result) {
if (result.value) {
// handle confirm
} else {
// handle cancel
}
})
Reference:
https://jsfiddle.net/ad3quksn/199/
`
swal({
title: 'Input something',
type: 'question',
input: 'text',
showCancelButton: true
}).then(
result => {
if (result.value) {
swal({
type: 'success',
html: 'You entered: <strong>' + result.value + '</strong>'
})
} else {
console.log(`dialog was dismissed by ${result.dismiss}`)
}
}
);
`
It shows with an output example of how to handle the promise as of v7.0.0: it helped me understand better!
Maybe help you :
swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })
ref : https://github.com/t4t5/sweetalert/issues/763
In sweet alert 2, How on load to set value in input
my sweet alert code
swal({
title: 'Are you sure?',
text: "You are going to send emails from the system. Please confirm",
showCancelButton: true,
input: 'email',
confirmButtonText: 'Submit',
confirmButtonColor: '#4aa0f1',
cancelButtonColor: '#898b8e',
confirmButtonText: 'Send'
}).then(function (email) {
send_email = email;
sentHtmtBody_send();
loadingIcon();
});
We can add another field
inputValue : 'test value',
after adding it full code we can see it like this
swal({
title: 'Are you sure?',
text: "You are going to send emails from the system. Please confirm",
showCancelButton: true,
input: 'email',
inputValue: "E.g john",
confirmButtonText: 'Submit',
confirmButtonColor: '#4aa0f1',
cancelButtonColor: '#898b8e',
confirmButtonText: 'Send'
}).then(function (email) {
send_email = email;
sentHtmtBody_send();
loadingIcon();
});
On sweetalert2 I implement it in this suggested way:
let input = document.createElement("input");
input.value = 'test';
input.type = 'text';
input.className = 'swal-content__input';
swal('Please type:', {
content: input,
buttons: ['Cancel', 'Update']
})
.then(() => {
//
});
Firstly, here is my code:
Ext.Msg.show({
title: 'Username',
msg: 'Please enter your username',
buttons: Ext.MessageBox.OKCANCEL,
prompt:{ maxlength : 180, autocapitalize : false },
modal: true,
fn: function(buttonId, text) {
console.log("OK ("+text+"), what is you password?");
if (buttonId == 'ok')
{
Ext.Msg.show({
title: 'Password',
msg: 'Please enter your password',
buttons: Ext.MessageBox.OKCANCEL,
prompt:{ maxlength : 180, autocapitalize : false },
modal: true,
fn: function(buttonId2, text2) {
if (buttonId == 'ok')
{
console.log("OK ("+text+", "+text2+"), attempting login..");
}
},
icon: Ext.MessageBox.INFO
});
}
},
icon: Ext.MessageBox.INFO
});
My problem is that when I press OK on the first messagebox, the second one appears for less then a second and then closes too, without me pressing OK on the second messagebox.
Ideally, of course, I'd display both username and password inputs in the same Messagebox, but I can't figure out how to do this.
All help appreciated!
The static show method on Ext.Msg that you are calling basically reconfigures the previous MessageBox and so is getting confused when hiding and showing again.
You should create a new instance of the Ext.MessageBox class and call the show method of that object so it will use independent instances.
var msg = new Ext.MessageBox().show({
title: 'Username',
msg: 'Please enter your username',
buttons: Ext.MessageBox.OKCANCEL,
prompt:{ maxlength : 180, autocapitalize : false },
modal: true,
fn: function(buttonId, text) {
console.log("OK ("+text+"), what is you password?");
if (buttonId == 'ok')
{
var msg2 = new Ext.MessageBox().show({
title: 'Password',
msg: 'Please enter your password',
buttons: Ext.MessageBox.OKCANCEL,
prompt:{ maxlength : 180, autocapitalize : false },
modal: true,
fn: function(buttonId2, text2) {
if (buttonId == 'ok')
{
console.log("OK ("+text+", "+text2+"), attempting login..");
}
},
icon: Ext.MessageBox.INFO
});
}
},
icon: Ext.MessageBox.INFO
});
Although this works, I would recommend you make a custom form panel containing both the fields and collect the information that way.
Hope this helps.
Stuart