如何在ajax请求完成时关闭甜蜜警报答案

【问题标题】：how to close sweet alert on ajax request completion如何在ajax请求完成时关闭甜蜜警报
【发布时间】：2017-12-11 21:15:02
【问题描述】：

我在我的 Angular 应用程序中使用 Sweet-alert。

function GetDataFromServer(url) {
        SweetAlert.swal(
    {
        title: "",
        text: "Please wait.",
        imageUrl: "../../app/app-img/loading_spinner.gif",
        showConfirmButton: false
    });
        return $http.get(url)
        .then(success)
        .catch(exception);
        function success(response) {
            //SweetAlert.swal(
            //  {
            //      title: "",
            //      text: "data loaded",
            //  });
            return response.data;
        }
        function exception(ex) {
            return (ex);
        }

    }

Req #1（我这篇文章的主要目标）

我正在寻找的是 ajax 请求何时完成，即控件在 then() 中输入，Sweet alert 应该会自动隐藏。

请求 #2 此外，在处理请求时，我不希望在甜蜜警报中有关闭弹出按钮（确定按钮）。

根据文档，showConfirmButton: false 应该隐藏它，但事实并非如此。

非常感谢任何帮助/建议。
谢谢。

【问题讨论】：

等等，你在问什么，看起来你在问两个不同的东西，在这里。您是要隐藏“确定”按钮还是要以编程方式关闭弹出窗口？
@Relic，是的，你是对的，我更新了帖子
我编辑了我的答案，请查看是否完全成功！

标签： javascript jquery angularjs ajax sweetalert

【解决方案1】：

要在完成后自动隐藏弹出窗口，您应该将初始弹出窗口设置为一个变量，以便以后可以访问它。也许：

function GetDataFromServer(url) {
    SweetAlert.swal({
        title: "",
        text: "Please wait.",
        imageUrl: "../../app/app-img/loading_spinner.gif",
        showConfirmButton: false
    });
    return $http.get(url)
    .then(success)
    .catch(exception);
    function success(response) {
        swal.close()
        return response.data;
    }
    function exception(ex) {
        return (ex);
    }

}

位于底部附近的方法部分中：https://t4t5.github.io/sweetalert/。

由于您没有特定的“方式”来隐藏“确定”按钮并且您只是在寻找建议，因此您总是可以使用一点 CSS 来定位它并给它 ol display: none;设置。

【讨论】：

您的帖子不清楚，能否请您添加正确的sn-p？？
TypeError: SweetAlert.close is not a function
sa.close()，注意我如何将 SweetAlert 分配给变量
是的，我也试过了，但还是一样的错误 sa.close is not a function
嗯，所以他们的文档没有显示很好的实施示例，请检查您的浏览器控制台swal 是否可用。然后尝试 swal.close() 就像它一样，我会更新我的帖子以反映建议的更改

【解决方案2】：

如果您查看 http://t4t5.github.io/sweetalert/ 的文档，SweetAlert 有 close 方法

您可以使用SweetAlert.close() 以角度关闭sweetalert。

【讨论】：

TypeError: SweetAlert.close is not a function
检查你的版本。

【解决方案3】：

您可以在 sweet 对象上使用 close 方法，请参阅下面的文档

https://t4t5.github.io/sweetalert/

swal.close(); --> 以编程方式关闭当前打开的 SweetAlert。

self.showProgress = function(message) {
  swal({ title: message });
  swal.showLoading();
};

self.hideProgress = function() {
  swal.close();
};

【讨论】：

【解决方案4】：

swal 不适用于sync 函数（例如get），您需要调用get async

swal({
    type: 'warning',
    text: 'Please wait.',
    showCancelButton: false,
    confirmButtonText: "ok",
    allowOutsideClick: false,
    allowEscapeKey: false
}).then(function (result) {
    if (result) {

        setTimeout(function () {
            $http.get(url)
        }, 500);
    }
});

【讨论】：

【解决方案5】：

如果您正在使用称为 angular-sweetalert 的 AngularJS 库，请使用 swal.close();关闭警报窗口。 angular-sweetalert 是核心 sweetalert 库包的包装器。

【讨论】：

【解决方案6】：

您可以在任何您想要的地方使用下面的代码行来关闭当前显示的 sweetalert。

swal.close();

就是这样！

【讨论】：

【解决方案7】：

缓存swal() 以便稍后触发。

function GetDataFromServer(url) {

let swalAlert = SweetAlert.swal; // cache your swal

swalAlert({
    title: "",
    text: "Please wait.",
    imageUrl: "../../app/app-img/loading_spinner.gif",
    showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
    function success(response) {
        swalAlert.close(); // this is what actually allows the close() to work
        return response.data;
    }
    function exception(ex) {
        return (ex);
    }

}

【讨论】：

【解决方案8】：

如果您使用 swal2，您可以在代码中的任何位置使用 Swal.close() 关闭它，以便在 ajax 完成时关闭它我认为下面的代码是一种简单的方法：

$(document).ajaxComplete(function () {
        Swal.close();
});

【讨论】：