Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to close sweet alert on ajax request completion

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.

like image 864
Kgn-web Avatar asked Jul 07 '17 14:07

Kgn-web


People also ask

How do I cancel sweet alert?

icon can be set to the predefined "warning" to show a nice warning icon. By setting buttons (plural) to true , SweetAlert will show a cancel button in addition to the default confirm button.

How do you call a sweet alert on button click?

All you have to do is call the swal() function. swal("Here's a message!", " Have a nice day!")

How do I send an Ajax request after some time?

You can move Request 2 into a function and this JS code will call the Request2 function after given interval of time (milliseconds), I have set it to 5 seconds for now. Show activity on this post. Applied to your code it might looks something like this: $(document).

How can I alert Ajax response data?

ajax({ url:"myscript. php", dataType: "json", success:function(data){ alert(data. cenas); } });


3 Answers

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.

like image 153
Eric Hodonsky Avatar answered Oct 17 '22 18:10

Eric Hodonsky


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

swal.close();

That's it!

like image 31
Angrej Kumar Avatar answered Oct 17 '22 16:10

Angrej Kumar


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();
};
like image 9
sur97c Avatar answered Oct 17 '22 16:10

sur97c