How to redirect page after click on Ok button on sweet alert?

Question

I am able to display sweet alert after the page refresh but I have to click on Ok button which I am getting on sweet alert to redirect the page.Please help me in this.

<?php
    echo '<script type="text/javascript">';
    echo 'setTimeout(function () { swal("WOW!","Message!","success");';
    echo '}, 1000);'
    echo 'window.location.href = "index.php";';
    echo '</script>';
?>

@DININDU It's from the SweetAlert plugin. The tag has a link to the documentation. — Barmar, May 21 '16 at 03:09

Alexandre Ribeiro · Answer 1 · 2020-05-19T10:28:19.200

Just make use of JavaScript promises. Put the then method after swal function. We do not need to use timer features. For example:

swal({
    title: "Wow!",
    text: "Message!",
    type: "success"
}).then(function() {
    window.location = "redirectURL";
});

The promise method .then is used to wait until the user reads the information of modal window and decide which decision to make by clicking in one button. For example, Yes or No.

After the click, the Sweet Alert could redirect the user to another screen, call another Sweet Alert modal window with contains new and subsequent question, go to a external link, etc.

Again, we do not have to use timer because it is much better to control user action. The user could wait for the eternity or take action as a Thanos' or Iron Man's finger snap.

With the use of promises, the code becomes shorter, clean and elegant.

Uncaught TypeError: Cannot read property 'then' of undefined — parts2eu, Aug 14 '20 at 17:58
Solved it for me! To fire swal I used: `Swal.fire({...}).then(function(){...});` — Matt Mintun, Oct 22 '20 at 21:47

Barmar · Accepted Answer · 2016-05-24T15:07:44.170

45

To specify a callback function, you have to use an object as the first argument, and the callback function as the second argument.

echo '<script>
    setTimeout(function() {
        swal({
            title: "Wow!",
            text: "Message!",
            type: "success"
        }, function() {
            window.location = "redirectURL";
        });
    }, 1000);
</script>';

edited May 24 '16 at 15:07

answered May 21 '16 at 03:16

Barmar

741,623
53
500
612

Thank you for reply Mr,Barmar, have you checked by code? I have to display that function in echo" " .Can you help me how write the code in echo. – May 21 '16 at 05:17
There's no difference when you write it with `echo`. – Barmar May 21 '16 at 05:30
code is working perfectly without echo but when i am inserting en echo its not working – May 21 '16 at 05:48
I have to load sweet alert on page refresh. My code is working on page refresh but that ok button is not working. – May 21 '16 at 05:50
1

Sorry Mr.Barmar, code is not working.Page is totally blank. – May 21 '16 at 06:56
Add an update to your question showing the full code. – Barmar May 21 '16 at 12:46
You're doing the redirect outside of the `swal()` function, so it doesn't wait for the user to respond. – Barmar May 24 '16 at 15:06
Please help me how to do that because i tried your code but it's not working. – May 25 '16 at 06:18
What is it doing wrong? Is it displaying the alert? What happens after you click OK? Are there any errors in the Javascript console? – Barmar May 25 '16 at 14:28
Yes, Mr.Barmar. There were issue in my plugin.So i deleted and updated new one with your code and its working perfectly.I am really appreciate for you support and help. Thank you very much.You give me great solution. – May 25 '16 at 17:15
Mr.Barmar, I have issue on sweetalert.Can you help me once again?http://stackoverflow.com/questions/39136597/how-to-use-sweetalert-to-display-variable-value-on-popup – Aug 25 '16 at 04:32
Hello Mr.Barmar.One more issue in sweet alert.Please please help me in this..http://stackoverflow.com/questions/39754112/how-to-display-session-value-on-sweet-alert-popup/39754182?noredirect=1#comment66804612_39754182 – Sep 28 '16 at 18:00

Pedro Lobito · Answer 3 · 2023-05-31T20:49:28.837

17

You can use the timer build-in function, i.e.:

swal({
  title: "Success!",
  text: "Redirecting in 2 seconds.",
  type: "success",
  timer: 2000,
  showConfirmButton: false
}, function(){
      window.location.href = "//this-person-does-not-exist.com";
});

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

edited May 31 '23 at 20:49

answered May 21 '16 at 03:30

Pedro Lobito

94,083
31
258
268

Mr.Pedro, have you checked by code? I have to display that function in echo" " .Can you help me how write the code in echo. – May 21 '16 at 05:28

score 7 · Answer 4 · answered Jan 23 '18 at 11:42

7

Best and Simple solution, we can add more events as well!

swal({ title: "WOW!",
 text: "Message!",
 type: "success"}).then(okay => {
   if (okay) {
    window.location.href = "URL";
  }
});

answered Jan 23 '18 at 11:42

Kapil Chhabra

415
5
7

score 5 · Answer 5 · answered Jun 19 '16 at 17:09

5

I wasn't able to do that with any swal(sweatAlert) default callback function, so I forced with jquery, got the Ok button class inspecting the element in chrome an made something like this:

<script>    
          sweetAlert({
                title:'Warning!',
                text: 'Invalid user or password!',
                type:'warning'
          },function(isConfirm){
                alert('ok');
          });
          $('.swal2-confirm').click(function(){
                window.location.href = 'index.php';
          });
</script>

The 'Ok' alert in function(isConfirm) was just a test to see if it would get into this function, if so I should be able to redirect from there, but I wasn't...

So I used jQuery to determine if the button "OK" of swal was clicked by getting it class: ".swal2-confirm' then I could redirect with success...

Hope this helps you all !

PS: I am using php echo to run the script, I din't have to leave php to run it, just use single quotes and you're done !

answered Jun 19 '16 at 17:09

Felipe Pena

59
4

it's doesn't redirect – Freddy Sidauruk Sep 20 '16 at 08:13
Inspect the element with chrome, probably, if it's not redirecting, it will return an error on the console. Also remember to add the sweetalert(and jquery) script and CSS properly. – Felipe Pena Sep 21 '16 at 20:25
*Correction: I was using an older swal files, just update to the newest one and the function should work, as @PedroLobito explained bellow. – Felipe Pena Nov 08 '16 at 18:13
I looked everywhere and nothing suggested worked until I saw this post; worked like a charm. Thanks. Only if I can this darn thing to work in IE. Anyone knows why the callback function is not executed? – NoBullMan Mar 19 '17 at 17:23

score 5 · Answer 6 · answered Jul 10 '20 at 19:06

If anyone needs help, this code is working!

swal({
          title: 'Request Delivered',
          text: 'You can continue with your search.',
          type: 'success'
        }).then(function() {
            window.location.href = "index2.php";
        })

score 3 · Answer 7 · answered Jan 23 '22 at 03:46

3

                Swal.fire({
                    title: result.value.title,
                    icon: result.value.icon,
                    text: result.value.message,
                }).then(function() {
                    window.location.href = "url";
                })

answered Jan 23 '22 at 03:46

mcontartesi

31
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 23 '22 at 05:24

score 1 · Answer 8 · answered Nov 27 '17 at 12:53

1

None of the above solutions worked for me, I had to use .then

swal({
  title: 'Success!',
  text: message,
  type: 'success',
  confirmButtonText: 'OK'
}).then(() => {
  console.log('triggered redirect here');
});

answered Nov 27 '17 at 12:53

Jagadesha NH

2,529
2
23
41

.then is indeed the way. – Marc Roussel Jun 15 '21 at 06:18

score 0 · Answer 9 · answered May 30 '17 at 13:07

0

I think this will help. It's same as given by Mr. Barmer. But I have enclosed this within php tags.

Here it goes....

    <?php if(!empty($_GET['submitted'])):?>
        <script>
        setTimeout(function() {
            swal({
                title: "Congratulaions!",
                text: "Signed up successfully, now verify your mail",
                type: "success",
                confirmButtonText: "Ok"
            }, function() {
                window.location = "index.php";
            }, 1000);
        });
        </script>   
    <?php endif;?>

answered May 30 '17 at 13:07

mnis.p

451
4
9

This doesn't qualify as a good answer as the question has been answered already, you should've edited @Barmer's answer and updated it with PHP tags. – Vignesh Apr 16 '18 at 12:53
1

yeah, you're right. I'm sorry. I'm not well acquainted with asking and responding on this site, it won't happen anymore and thanks for pointing this out. – mnis.p Jun 07 '18 at 20:37

score 0 · Answer 10 · answered Jul 20 '18 at 19:50

function confirmDetete(ctl, event) {

    debugger;
    event.preventDefault();
    var defaultAction = $(ctl).prop("href");
    swal({
        title: "Are you sure?",
        text: "You will  be able to add it back again!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel",
        closeOnConfirm: false,
        closeOnCancel: false
    },
        function (isConfirm) {
            if (isConfirm) {
                $.get(ctl);
                swal({
                    title: "success",
                    text: "Deleted",
                    confirmButtonText: "ok",
                    allowOutsideClick: "true"
                }, function () { window.location.href = ctl })

     // $("#signupform").submit();
            } else {
                swal("Cancelled", "Is safe :)", "success");

            }
        });
}

score 0 · Answer 11 · edited Oct 08 '18 at 10:30

0

Existing answers did not work for me i just used $('.confirm').hide(). and it worked for me.

success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);

edited Oct 08 '18 at 10:30

Eric Aya

69,473
35
181
253

answered Oct 08 '18 at 10:09

Chidananda Nayak

1,161
1
13
45

score 0 · Answer 12 · answered Apr 18 '19 at 08:35

I did it by using this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
        <script>

        $(".confirm").on('click',function(){
            window.location.href = "index.php";
        });

        </script>

Thanks.

score 0 · Answer 13 · answered Sep 20 '19 at 16:24

  setTimeout(function(){
Swal.fire({
  title: '<span style="color:#fff">Kindly click the link below</span>',
  width: 600,
  showConfirmButton: true,
    confirmButtonColor: '#ec008c',
    confirmButtonText:'<span onclick="my2()">Register</span>',
  padding: '3em',
  timer: 10000,
  background: '#fff url(bg.jpg)',
  backdrop: `
    rgba(0,0,123,0.4)
    center left
    no-repeat
  `
})
  }, 1500);
}
function my2() {
 window.location.href = "https://www.url.com/";   
}

score 0 · Answer 14 · answered Jul 05 '21 at 22:00

Worked for me!!

<head>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<?php
echo "<script>
Swal.fire({
title: 'Do you want to save the changes?',
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
if (result.isConfirmed) {
window.location = 'www.google.com';
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
</script>";
?>

score 0 · Answer 15 · answered Nov 15 '21 at 10:20

0

You can use callback function in SweetAlert2, it worked for me.

swal({
    title: "Success!",
    text: "Example success message",
    type: "success"
}, function() {
     window.location.href = 'https://some-url';
});

answered Nov 15 '21 at 10:20

MyFRA

366
2
5

score 0 · Answer 16 · answered Jan 07 '22 at 18:48

0

  $('.delete-record').on('click', function (e) {
            e.preventDefault();
            window.url = $(this).attr('href');
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Confirm',
                padding: '2em'
            }).then(function (result) {
                if (result.value) {
                    console.log(window.url);
                    window.location.href = window.url;
                }
            });
        });

answered Jan 07 '22 at 18:48

Ayoub ait

163
2
4

Please don't only share code, but also an explanation whats happening – Timberman Jan 11 '22 at 23:48
for example you have this a tag delete so when this a clicked you will stop the event and shwo the swal whith confermation button and cancel button if ok button clicked you will redirect the user to the link in href att – Ayoub ait Jan 13 '22 at 12:53

score 0 · Answer 17 · answered Jan 18 '22 at 03:35

0

swal("Payment send successfully", "Thanks for using Npay!", "success")
.then(function() {
    router.push("/")
});

answered Jan 18 '22 at 03:35

Shamaz saeed

387
3
8

How to redirect page after click on Ok button on sweet alert?

17 Answers17

Linked

Related