关闭甜蜜警报弹出窗口并通过 AJAX 启动另一个甜蜜警报弹出窗口时出现问题答案

【问题标题】：Problem closing Sweet Alert popup and initiating another sweet alert popup via AJAX关闭甜蜜警报弹出窗口并通过 AJAX 启动另一个甜蜜警报弹出窗口时出现问题
【发布时间】：2019-05-01 23:38:47
【问题描述】：

我正在使用 Laravel 构建应用程序。我有一个支付页面，它的设计方式是当用户点击支付按钮时，我会操纵甜蜜警报库，并显示用户应该检查他的手机的消息。 sweet alert 弹出窗口还有一个 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",
            });
        }
    }
});

【问题讨论】：

标签： javascript jquery sweetalert

【解决方案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();

【讨论】：