时间戳

首页 > 解决方案 > SweetAlert2 : 配置我的警报的一些困难

javascript - SweetAlert2 : 配置我的警报的一些困难

问题描述

我正在尝试使用 sweetAlert2。https://sweetalert2.github.io/

计划如下：

1) 主警报的显示

2）如果他点击“取消”，我会正常关闭警报。

3) 如果他点击“确定”，按钮会转到加载位置，但警报不会关闭。与此同时，我提出了一个 Ajax 请求。当它结束时，我才能关闭第一个警报并查看第二个警报。

4）当我在第二个警报上单击“确定”时，页面重新加载。

但是目前我无法很好地管理如何在单击“确定”和“取消”时显示警报。

我在下面有这段代码：

                Swal.fire({
                    title: 'Change to '+planName,
                    text: message,
                    icon: "info",
                    showCancelButton: true,
                    showLoaderOnConfirm: true,
                    preConfirm: function () {
                        // todo - actually change the plan!
                        $.ajax({
                            url: changeUrl,
                            method: 'POST'
                        }).done(function(){
                            Swal.fire({
                                title: 'Plan changed !',
                                icon: 'success',

                            },function() {
                                location.reload();
                            })
                        });
                    }
                });

当我在第一个警报上单击 CANCEL 时，一切都很顺利。但是，如果我单击“确定”，我会看到确认按钮进入“加载程序”，但警报直接关闭。然后发出我的 Ajax 请求，然后显示第二个警报。

有人可以帮我吗？

编辑：当前代码：

                Swal.fire({
                    title: 'Change to '+planName,
                    text: message,
                    icon: "info",
                    showCancelButton: true,
                    showLoaderOnConfirm: true,
                    preConfirm: function () {
                        // todo - actually change the plan!
                        return $.ajax({
                            url: changeUrl,
                            method: 'POST'
                        }).done(function(){
                            Swal.fire({
                                title: 'Plan changed !',
                                icon: 'success',

                            },function() {
                                location.reload();
                            })
                        });
                    }
                });

标签： javascriptsweetalertconfirmsweetalert2

解决方案

这样做怎么样

Swal.fire({
  title: 'Change to '+planName,
  text: message,
  icon: "info",
  showCancelButton: true,
  showLoaderOnConfirm: true,
  preConfirm: function () {
    // todo - actually change the plan!
    return $.ajax({
      url: changeUrl,
      method: 'POST'
    }).done(function(){
      Swal.fire({
        title: 'Plan changed !',
        icon: 'success',

      },function() {
        location.reload();
      })
    });
  }
});

这是一个具有类似实现的沙箱 https://codesandbox.io/s/muddy-smoke-5gwf0

推荐阅读