how to close sweet alert on ajax request completion

Question

I am using Sweet-alert in my angular app.

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 (Main Objective of my this post)

What I am looking for is when the ajax request completes i.e., controls enters in the then(), Sweet alert should automatically hide.

Req #2 Also while request processing, I don't want to have the Close pop-up button (Ok button) in the sweet alert.

As per the documentation,showConfirmButton: false should hide it but it's not.

Any help/suggestion highly appreciated.
Thanks.

Hold on, what are you asking, it looks like you're asking two different things, here. Do you wan to hide the 'ok' button or do you want to close the pop-up progamatically? — Eric Hodonsky, Jul 07 '17 at 14:22

Eric Hodonsky · Answer 1 · 2017-07-10T15:03:55.537

40

For automatically hiding the pop-over when it's done, you should set your initial pop-over to a variable so you can access it later. Maybe:

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);
    }

}

It's right on: https://t4t5.github.io/sweetalert/ in the methods section near the bottom.

Since you don't have a specific 'way' you want to do hide the ok button and you're just looking for suggestions, you could always just use a little CSS to target it and give it the ol display: none; setup.

edited Jul 10 '17 at 15:03

answered Jul 07 '17 at 14:20

Eric Hodonsky

5,617
4
26
36

Your post is not clear, can you please add proper snippet?? – Kgn-web Jul 07 '17 at 14:26
1

`TypeError: SweetAlert.close is not a function` – Kgn-web Jul 07 '17 at 14:47
1

`sa.close()`, notice how I assigned the SweetAlert to a variable – Eric Hodonsky Jul 07 '17 at 16:01
Ya, I tried that as well but still the same error sa.close is not a function – Kgn-web Jul 07 '17 at 19:17
1

Hmm, so their docs don't show good examples of implimentation, check in your browser console of `swal` is available. Then try just `swal.close()` like it is exactly, I'll update my post to reflect the suggested changes – Eric Hodonsky Jul 10 '17 at 15:03
1

`swal.close()` solved my issue. Thanks. – Kamlesh Dec 27 '21 at 12:27

score 33 · Answer 2 · answered Feb 20 '20 at 19:34

33

You can close current showing sweetalert by using below line of code anywhere you want.

swal.close();

That's it!

answered Feb 20 '20 at 19:34

Angrej Kumar

898
7
12

score 9 · Answer 3 · answered Sep 04 '17 at 15:42

You can use the close method over the sweet object see the documentation in down part

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

swal.close(); --> Close the currently open SweetAlert programmatically.

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

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

score 5 · Answer 4 · answered Dec 15 '21 at 14:20

5

If you use swal2 you can close it using Swal.close() from anywhere inside your code for closing it when ajax is complete I think the code below is an easy way:

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

answered Dec 15 '21 at 14:20

erfanilaghi

206
3
12

score 4 · Answer 5 · answered Jul 07 '17 at 14:29

4

SweetAlert has close method if you check the docs at http://t4t5.github.io/sweetalert/

You can use SweetAlert.close() to close the sweetalert in angular.

answered Jul 07 '17 at 14:29

erdimeola

844
8
17

`TypeError: SweetAlert.close is not a function` – Kgn-web Jul 07 '17 at 14:46
1

Check your version. – erdimeola Jul 08 '17 at 20:16

score 4 · Answer 6 · edited Jul 08 '18 at 00:17

swal does not work with sync function (ex. get), you need make call 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);
    }
});

score 2 · Answer 7 · answered Aug 16 '18 at 16:13

2

if you are using the AngularJS library known as angular-sweetalert then use swal.close(); to close the alert window. angular-sweetalert is a wrapper on the core sweetalert library package.

answered Aug 16 '18 at 16:13

user1419261

829
8
5

score 0 · Answer 8 · answered Jul 21 '21 at 00:00

Cache the swal() to trigger it later.

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);
    }

}

how to close sweet alert on ajax request completion

8 Answers8