Geek Answers Handbook

How to redirect a page after clicking on the Ok button on a sweet alert?

I can show a sweet warning after refreshing the page, but I have to click the "OK" button, on which I get a sweet warning to redirect the page. Please help me with this.

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

To specify a callback function, you must use the 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>';
+20
source

Just put .then( before the function. We do not need to use the timer functions. For example:

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

The .then function is used to wait for the user to read the modal window information and decide which decision to make by pressing a single button. For example, Yes or No

After clicking, Swich Alert can redirect the user to another screen, call up another Sweet Alert modal window with a new and subsequent question, go to an external link, etc.

Again, we do not need to use a timer, because it is much better to control user actions. The user can wait forever or act as the click of a thumb of Thanos. 😜

Using .then code becomes shorter, clearer, and more elegant. ;)

+29
source 

 setTimeout(function () { swal({ title: "Wow!", text: "Message!", type: "success", confirmButtonText: "OK" }, function(isConfirm){ if (isConfirm) { window.location.href = "//stackoverflow.com"; } }); }, 1000); 
 <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">

Or you can use the built-in timer function, that is:

 swal({ title: "Success!", text: "Redirecting in 2 seconds.", type: "success", timer: 2000, showConfirmButton: false }, function(){ window.location.href = "//stackoverflow.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">
+6
source

I could not do this with any of the default swal (sweatAlert) functions, so I forced jquery to use the Ok button class, the validation element in chrome, did 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" function in the (isConfirm) function was just a test to see if it would fall into this function, if so I had to redirect from there, but I wasn’t ...

So, I used jQuery to determine if the "OK" swal button was pressed, getting its class: ".swal2-confirm", after which I could redirect with success ...

Hope this helps all of you!

PS: I use php echo to run the script, I do not need to leave php to run it, just use single quotes, and you're done!

+5
source

The best and easiest solution, we can add some more events!

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

I think this will help. This is the same thing that Mr. Barmer gave. But I put this in php tags.

Here he 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;?>
0
source

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'); });
0
source 
 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"); } }); }
0
source

Existing answers didn't help 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);
0
source

I did this with 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>

Thank you

0
source 
  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/"; }
0
source

More articles:


All Articles