How to have sweetalert return true/false for confirm without promise?

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 (e.g. Babel) to transpile/convert your source code with ES2015+ features to ES5, which is widely supported:

- Using 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.

- Using 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;
}

Things to consider:

  • 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 (e.g. Webpack, Browserify, Gulp, Grunt, etc.) without much effort in the long run.

Working example with quick setup:

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 confirm() method in the HTML Living Standard
  • the ES2017 Language Specification

Using sweetalert2 v7.24.1

A work-around that might be handy.

The Function

function sweetConfirm(title, message, callback) {
    swal({
        title: title,
        text: message,
        type: 'warning',
        showCancelButton: true
    }).then((confirmed) => {
        callback(confirmed && confirmed.value == true);
    });
}

Usage

sweetConfirm('Confirm action!', 'Are you sure?', function (confirmed) {
    if (confirmed) {
        // YES
    }
    else {
        // NO
    }
});

Tags:

Javascript

Sweetalert

Recent Posts