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

Posted 2023-02-19

【中文标题】如何在ajax请求完成时关闭甜蜜警报

【英文标题】：how to close sweet alert on ajax request completion

【发布时间】：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，是的，你是对的，我更新了帖子

我编辑了我的答案，请查看是否完全成功！

【参考方案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();
);