Override data-request-confirm to implement Sweet Alerts in AJAX

Tips and Tricks
#1

Hy

Is it possible to override data-request-confirm to use sweetalert ‘https://sweetalert2.github.io’ instead of javascript alert ?

Thanks

#2

Hey @ridha82

Here you go, I haven’t tested it but it should get you in the right direction. The following implements SweetAlert2 using the October CMS AJAX framework.

addEventListener('ajax:error-message', onErrorMessage);
addEventListener('ajax:confirm-message', onConfirmMessage);

function onErrorMessage(event) {
    const { message } = event.detail;
    if (!message) {
        return;
    }

    // Show sweet alert
    Swal.fire(message);

    // Prevent the default alert() message
    event.preventDefault();
}

function onConfirmMessage(event) {
    const { message, promise } = event.detail;
    if (!message) {
        return;
    }

    Swal.fire({
        title: "Are you sure?",
        text: message,
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Confirm"
    }).then((result) => {
        if (result.isConfirmed) {
            promise.resolve();
        }
        else {
            promise.reject();
        }
    });

    // Prevent the default confirm() message
    event.preventDefault();
}

More information on AJAX JS events can be found in the documentation:

1 Like
#3

Hy,

Thanks I will test it