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(() => {
//
});
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 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
I need create a generic function similar the confirm function in jquery using sweet alert 2.
var eval = ConfirmModalDelete("mensaje text");
alert(eval);
The problem is when call the function "ConfirmModalDelete" jquery not wait for result of "swal".
function ConfirmModalDelete(mensaje) {
var retorno = false;
swal({
title: 'Are you sure?',
text: mensaje,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
if (result.value) {
retorno = true;
}
});
return retorno;
}
And the result is always "false".
Help please.
-------------------------------------Edit 09-07-2018------------------------
Eureka!
The solution is it:
var fun = function()
{
alert("hello");
}
MensajeConfirm(fun);
Then:
function MensajeConfirm(func)
{
swal({
title: "title",
text: "message",
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirm",
cancelButtonText: "Cancel",
showLoaderOnConfirm: true,
allowOutsideClick: false,
focusCancel: true
}).then(function (eval) {
if (eval.value) {
//case press confirm
func();
//
}
if (eval.dismiss) {
///eval case esc|cancel
}
});
}
Create a callback function and pass it in your function.
function handleOkClick(){
// do your stuff
}
function ConfirmModalDelete(mensaje, handleOkClick) {
swal({
title: 'Are you sure?',
text: mensaje,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
if (result.value) {
handleOkClick();
}
});
Please use '.done' function:-
$("button").click(function() {
swal({
title: 'Are you sure?',
text: 'mensaje',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
} ).then(function (hello) {
alert('dfasdfsd');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert2#7.12.10/dist/sweetalert2.all.js"></script>
<button type="button">Click Me!</button>
Make sure you're using the latest version of SweetAlert2. Your code example works fine:
console.log(swal.version)
swal({
title: 'Are you sure?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
console.log(result)
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7"></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
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
SweetAlert2 examples do not work with IE11.
The following code won't run with IE11:
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
SweetAlert2 examples use Arrow functions and other ES6 goodies that IE11 cannot handle.
The simple way to overcome this problem is to use function() syntax instead () =>
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function(result) {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})