how to close sweet alert on ajax request completion

Kgn-web picture Kgn-web · Jul 7, 2017 · Viewed 73.3k times · Source

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.

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

Any help/suggestion highly appreciated.
Thanks.

Answer

Eric Hodonsky picture Eric Hodonsky · Jul 7, 2017

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.