theUnforgiven's avatar

Using SweetAlert and location.reload()

Hi all,

Need a bit of advise/help

I want to show a sweet alert message when a user clicks on this ajax post request to notify the user that they are now following the other user. Here's what I have already.

<script>
        $(document).ready(function(){

            $('#followUser').click(function(e) {
                e.preventDefault();
                var url = '{!! url() !!}/follow/{!! $profile->user->id !!}';

                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        'follower': '{!! Auth::id() !!}',
                        'followed_by': '{!! $profile->user->id !!}'
                    },
                    cache: false,
                    success: function(){
                            swal({
                                title: "Success!",
                                text:  "You are now following",
                                type: "success",
                                timer: 3000,
                                showConfirmButton: false
                            });
                        window.setTimeout(function(){ } ,3000);
                        location.reload();

                    }

                });
                return false;
            });

        });
    </script>

But the sweet alert only display in a matter of milliseconds before it does the reload so how can I display this message via sweet alert for 3 seconds then just has the alert disappears, do the reload??

0 likes
12 replies
theUnforgiven's avatar

Anyone know the best way to achieve this?

The window.setTimeout(function(){ } ,3000); doesn't help....

nivv's avatar

@lstables You have to put your location.reload inside the timeout function.

Change this:

window.setTimeout(function(){ } ,3000);
location.reload();

To this:

window.setTimeout(function(){ 
    location.reload();
} ,3000);

If it's not inside it will get called immediately

boynet's avatar

I think its more user friendly to show the alert after the reload

1 like
theUnforgiven's avatar

I am using that within the video, but this is something a little different.

boynet's avatar

its the same.. just implement it in javascript.. instead of sessions use localstorage

nfauchelle's avatar

Maybe;

swal({
    title: "Success!",
    text:  "You are now following",
    type: "success",
    timer: 3000,
    showConfirmButton: false
}), function(){
    location.reload();
});
1 like
theUnforgiven's avatar

Tried that already and doesn't work @nfauchelle

@boynet I wished I knew enough javascript to do so, but unfortunately I don't hence me asking for help :)

boynet's avatar

google and learn about : localstorage

after you know how to use it just think about what you trying to do... you want to know after refresh if you need to show alert so in js in each time:

    // check for unflashed alerts messages
    // if there is than call the alert api

before refresh with alert:

//insert data into localsotrage
//call refresh
1 like
theUnforgiven's avatar
theUnforgiven
OP
Best Answer
Level 51

So i decided to do it like this and seems to be working now, thanks for the help and advise.

localStorage.setItem("swal",
                                swal({
                                    title: "Success!",
                                    text:  "Message sent",
                                    type: "success",
                                    timer: 3000,
                                    showConfirmButton: false
                                })
                        );
                        location.reload();
                        localStorage.getItem("swal");

Please or to participate in this conversation.