Override data-request-confirm

[zimbar]

Hy

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

Thanks

[daftspunk]

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:

https://docs.octobercms.com/3.x/cms/ajax/javascript-api.html

Duplicate of: https://talk.octobercms.com/t/override-data-request-confirm-to-implement-sweet-alerts-in-ajax/2675/2