问题关闭具有计时器的Sweet Alert库

时间:2019-04-12 11:57:08

标签: ajax countdowntimer sweetalert

我正在使用Laravel构建应用程序。我有一个付款页面,该页面的设计方式是当用户单击“付款”按钮时,会触发甜蜜警报库,并显示一条消息,提示用户应检查手机。甜蜜的警报弹出窗口还具有60秒的倒数计时器,效果很好。

当计时器计数时,我正在通过AJAX将有效负载推送到后端,从而使用了支付网关API(它将STK推送到带有付款明细的用户的电话)。

付款成功后,我需要关闭甜蜜警报弹出框,然后重定向到其他无法执行的页面。请协助?

<script>
//When payment button is clicked
$("#payment").submit(function( event ) {
        event.preventDefault();

        //Initiate sweet alert library with a countdown timer of 60 seconds
        var timer = 60,
        isTimerStarted = false;

        (function customSwal() {
            swal({
                title: "Message Sent",
                text: "Please Check your Phone..." + timer,
                timer: !isTimerStarted ? timer * 1000 : undefined,
                showConfirmButton: false,
                closeOnClickOutside: false,
                showCancelButton: false,
            });
            isTimerStarted = true;
            if(timer) {
                timer--;
                setTimeout(customSwal, 1000);
            }
        })();
        //END sweet alert

        //Fetch data from form
        var token = $('#token').val();
        var phone = $("#phone").val();
        var email = $("#email").val();    
        var plan = $("#plan").val(); 
        var amt = $("#amount").val();     

        var type ={
            'token': token,
            'phone' : phone,
            'email' : email,
            'plan' : plan,
            'amt' : amt
        };

        // console.log(type);

        $.ajax({
            type: "POST",
            url: "payment",
            data:JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function(response){
                //On success
                if(response == 'suc'){
                    //Add code to remove the sweet alert popup

                    //Page to redirect to
                    window.location.href="success" ;
                }
            },
            //Alert errors from backend
            error: function(data) {
                //console.log(data);
            }
        });
    });
    //END submission
</script> 

0 个答案:

没有答案