I like the simplicity of javascript
confirm so that I can do this:
if(!confirm("are you sure?"))
return;
in sweetalert
you have to nest your true
code within a then
promise function.
Is there a way to have sweetalert
return true/false
the same way it happens in JS confirm?
By design, SweetAlert uses Promises to keep track of how the user interacts with the HTML-based alert and it's non-blocking (you can still interact with the webpage/UI) as opposed to the browser's built-in confirm()
method, which, when displaying the modal window, it prevents the user from accessing the rest of the program's interface until the dialog box is closed .
You cannot call swal()
with the same interface-blocking behavior, as if it were another type of confirm()
. However , by using the ES2017 async
/ await
features, you can write your code in a similar fashion and practically achieve the same goal without blocking the interface.
In order to be able to use async
/ await
across browsers, use a transpiler (eg Babel ) to transpile/convert your source code with ES2015+ features to ES5 , which is widely supported :
swal()
in an if
statement without wrapping: You can just simply call swal(...)
with await
:
if (!await swal({text: 'Are you sure?', buttons: true})) {
return;
}
And the Promise
will resolve, when using SweetAlert as truthy ( true
, when the user confirms the alert) or falsy ( null
otherwise) as the condition of the if
statement as described in the SweetAlert guides .
swal()
in an if
statement with a wrapper to resemble to confirm()
: In order to provide the familiarity of confirm()
, separate swal(...)
with the desired options into an async function
:
async function confirm(message) {
return swal({
text: message,
buttons: true
});
}
Then use it in the if
statement prefixed with await
as if it were just like a form of confirm()
and as such, it would also work as expected:
if (!await confirm('Are you sure?')) {
return;
}
Using await
outside of an async function
is currently not supported . To get around this issue, either place your code in an event handler:
document.addEventListener('DOMContentLoaded', async () => { // ... await and other async code here });
or use an async
IFEE
or IIAFE
:
(async () => { // ... await and other async code here })();
In order to easily transpile your source code containing ES2015+ features, consider using a tool or library to bundle your code (eg Webpack , Browserify , Gulp , Grunt , etc.) without much effort in the long run.
You can check out the sources of the working example in this repository based on Webpack .
Full disclosure: I made the repository in order to provide an easily usable example, which can be cloned, install dependencies via NPM and start using right away.
Additional resources:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.