在 ajax 调用期间无法单击 SweetAlert2 取消按钮

Question

我有一个在选择下拉项时调用的函数，它会触发 sweetalert2 弹出窗口，如：

function SwalPopup(ip, method) {
                var methodmsg = method.charAt(0).toUpperCase() + method.slice(1);
                swal.fire({
                    text: 'Are you sure you want to '+methodmsg+' ?',
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    confirmButtonText: 'Yes, '+methodmsg+'!',
                    cancelButtonColor: '#d33',
                    showCloseButton: true,
                    showLoaderOnConfirm: true,
                    preConfirm: function () {
                        return new Promise(function (resolve, reject) {
                            var ajaxCall = $.ajax({
                                    url: 'wait.php',
                                    type: 'GET',
                                    dataType: 'json',
                                    timeout: 5000
                            })

                            ajaxCall.done(function( response ){
                                resolve(response);
                                swal.fire({
                                    type: 'success',
                                    html: 'Component with IP: <?php echo $action_ip; ?>'+ip+' was '+methodmsg+' sucessfully!',
                                    showCancelButton: false,
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Ok',
                                    allowOutsideClick: false
                                });
                            });

                            ajaxCall.fail(function( jqXhr, textStatus, errorThrown ){
                                reject(errorThrown);
                                Swal.fire('Error! It was not possible to '+methodmsg+' component with IP: <?php echo $action_ip; ?>'+ip, 'Status: '+textStatus+' Error: '+errorThrown);
                            });
                        });
                    },
                    allowOutsideClick: false
                });
            }

我的 wait.php 文件正在执行 sleep(10) 并返回 true:

sleep(10);

echo json_encode(array(
    'success' => true,
));

因此，通过 Ajax 调用的此 wait.php 文件需要 10 秒，但我在 ajax 请求上强制超时 5 秒。在超时完成之前，sweetalert 弹出窗口显示加载动画和取消按钮。但是这个取消按钮是不可点击的。我想为它分配一个中止函数，这样 ajax 请求可以在需要很长时间时取消。

这是一个错误吗？

谢谢

Answer 1

这是将在 SweetAlert2 的下一个主要版本中更改的行为，您可以在此处跟踪进度：https://github.com/sweetalert2/sweetalert2/issues/1501

目前，使用 Swal.getCancelButton().removeAttribute('disabled') 作为解决方法。

在 ajax 调用期间无法单击 SweetAlert2 取消按钮

SweetAlert2 cancel button not clickable during ajax call

javascript

ajax

sweetalert2