Проблема закрытия всплывающего окна Sweet Alert и запуска другого всплывающего окна Sweet Alert через AJAX - PullRequest
Новая
       21

Проблема закрытия всплывающего окна Sweet Alert и запуска другого всплывающего окна Sweet Alert через AJAX

0 голосов
/ 01 мая 2019

Я работаю над сборкой приложения, используя Laravel. У меня есть страница оплаты, которая разработана таким образом, чтобы пользователь нажимал на кнопку оплаты, I t rigger sweet alert Библиотека с сообщением о том, что пользователь должен проверить свой телефон . У всплывающего сообщения sweet есть таймер обратного отсчета на 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",
            });
        }
    }
});

1 Ответ

0 голосов
/ 01 мая 2019 
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();
...