关闭 Sweet Alert 弹出窗口并通过 AJAX 启动另一个 Sweet Alert 弹出窗口时出现问题

Question

我正在使用 Laravel.I 构建一个应用程序，它有一个支付页面，当用户点击支付按钮时，我会触发甜蜜警报库，并显示一条消息用户应该检查他的phone。 甜蜜提醒弹出窗口还有一个 60 秒的倒数计时器，效果很好。当计时器计时时，我通过 AJAX 将有效负载推送到后端，从而使用支付网关 API 并监听状态。当付款失败时，我需要关闭甜蜜提醒弹出框（有一个计时器）并启动另一个甜蜜提醒弹出框（带有不同的消息），但它不起作用..

请帮忙？

带定时器的甜蜜提醒代码

  (function customSwal() {
        swal({
            title: "Message Sent",
            icon: '{{ asset('assets/images/mpesa.png')}}',
            imageWidth: 30,
            imageHeight: 30,
            imageAlt: 'Mpesa Icon',
            text: "Please Check your Phone for a payment dialogue..." + timer,
            timer: !isTimerStarted ? timer * 1000 : undefined,
            closeOnClickOutside: false,
            buttons:false
        });
        isTimerStarted = true;
        if(timer) {
            timer--;
            setTimeout(customSwal, 1000);
        }
})();

AJAX 提交到后端的代码

$.ajax({
    type: "POST",
    url: "payment",
    data:JSON.stringify(type),
    contentType: 'application/json',
    dataType: "json",
    success: function(response){
        //Not paid
        if(response == 'unpaid'){
            //Close previous alert (with timer)
            swal.close();
            //Open another alert
            swal({
                title: "Ooops!",
                text: "Transaction Cancelled, Please try again",
                icon: "info",
                button: "Try Again",
            });
        }
    }
});

Answer 1

var paymentPopupRef = null;
var paymentPopupTimerRef = null;
var paymentTimeInterval = 10000;

function updatePaymentPopupText() {
    if (!paymentPopupRef) { return; }
    paymentPopupRef.update({ text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(Swal.getTimerLeft() / 1000)} seconds` });
}

function openPaymentPopup() {
    paymentPopupRef = paymentPopupRef || Swal.fire({
        title: "Message Sent",
        text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(paymentTimeInterval / 1000)} seconds`,
        timer: paymentTimeInterval,
        onBeforeOpen: () => {
            paymentPopupTimerRef = setInterval(() => updatePaymentPopupText(), 1000);
        },
        onClose: () => {
            clearInterval(paymentPopupTimerRef);
            paymentPopupRef = paymentPopupTimerRef = null;
        }
    });
}

function closePaymentPopup() {
    (!paymentPopupRef) && paymentPopupRef.close()
}

function makePayment() {
    $.ajax({
        type: "POST",
        url: "payment",
        data: JSON.stringify({}),
        contentType: 'application/json',
        dataType: "json",
        success: function (response) {
            if (response == 'unpaid') {
                closePaymentPopup();
                Swal.fire({
                    title: "Ooops!",
                    text: "Transaction Cancelled, Please try again",
                    icon: "info",
                    button: "Try Again",
                });
            }
        }
    });
}

openPaymentPopup();
makePayment();

关闭 Sweet Alert 弹出窗口并通过 AJAX 启动另一个 Sweet Alert 弹出窗口时出现问题

Problem closing Sweet Alert popup and initiating another sweet alert popup via AJAX

javascript

jquery

sweetalert