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.

Maugham

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? – Huihuie

@Relic, yes you're right I updated the post – Maugham

I edited my answer, please see for full success! – Huihuie

Answer 1

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.

Huihuie

Your post is not clear, can you please add proper snippet?? – Maugham

TypeError: SweetAlert.close is not a function – Maugham

sa.close(), notice how I assigned the SweetAlert to a variable – Huihuie

Ya, I tried that as well but still the same error sa.close is not a function – Maugham

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 – Huihuie

swal.close() solved my issue. Thanks. – Wheeler

Answer 2

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

swal.close();

That's it!

Wadlinger

Answer 3

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

Romy

Answer 4

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

Brocky

Answer 5

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.

Cymatium

TypeError: SweetAlert.close is not a function – Maugham

Check your version. – Cymatium

Answer 6

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

Secondrate

Answer 7

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.

Autoroute

Answer 8

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

}

Chiasma

Answer 9

When you want to close to the Swal window, you could use Swal close method:

Swal.close();

Jablon