Comment rediriger une page après avoir cliqué sur Ok bouton en alerte douce?
Je peux afficher une alerte après l'actualisation de la page, mais je dois cliquer sur le bouton Ok que je reçois en alerte pour rediriger la page. Aidez-moi, s'il vous plaît.
<?php
echo '<script type="text/javascript">';
echo 'setTimeout(function () { swal("WOW!","Message!","success");';
echo '}, 1000);'
echo 'window.location.href = "index.php";';
echo '</script>';
?>
Pour spécifier une fonction de rappel, vous devez utiliser un objet comme premier argument et la fonction de rappel comme second argument.
echo '<script>
setTimeout(function() {
swal({
title: "Wow!",
text: "Message!",
type: "success"
}, function() {
window.location = "redirectURL";
});
}, 1000);
</script>';
Il suffit de mettre .then( avant la fonction. Nous n'avons pas besoin d'utiliser les fonctions de minuterie ..__ Par exemple:
swal({
title: "Wow!",
text: "Message!",
type: "success"
}).then(function() {
window.location = "redirectURL";
});
La fonction .then permet d’attendre que l’utilisateur lise les informations de la fenêtre modale et décide quelle décision prendre en cliquant sur un bouton. Par exemple, Yes ou No.
Après le clic, l'alerte Swich pourrait rediriger l'utilisateur vers un autre écran, appeler une autre fenêtre modale Sweet Alert avec la question nouvelle et suivante, accéder à un lien externe, etc.
Encore une fois, nous n’avons pas besoin d’utiliser timer car il est bien mieux de contrôler l’action de l’utilisateur. L'utilisateur peut attendre l'éternité ou prendre des mesures sous la forme d'un claquement de doigt de Thanos. ????
Avec l'utilisation de .then, le code devient plus court, propre et élégant. ;)
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">Ou vous pouvez utiliser la fonction intégrée timer, c'est-à-dire:
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">Je ne pouvais pas faire cela avec une fonction de rappel par défaut swal (sweatAlert), alors j'ai forcé avec jQuery, la classe de boutons Ok inspectant l'élément en chrome et fabriquant quelque chose comme ceci:
<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>
L'alerte 'Ok' dans la fonction (isConfirm) était juste un test pour voir si elle entrerait dans cette fonction, si donc je devrais être capable de rediriger à partir de là, mais je n'étais pas ...
J'ai donc utilisé jQuery pour déterminer si le bouton "OK" de swal avait été cliqué en obtenant la classe: ".swal2-confirm", alors je pouvais rediriger avec succès ...
En espérant que cela vous aide tous !
PS: J'utilise php echo pour exécuter le script, je n'ai pas besoin de quitter php pour l'exécuter, utilisez simplement des guillemets simples et vous avez terminé!
Meilleure solution simple, nous pouvons ajouter plus d'événements!
swal({ title: "WOW!",
text: "Message!",
type: "success"}).then(okay => {
if (okay) {
window.location.href = "URL";
}
});
Les réponses existantes ne fonctionnaient pas pour moi, je viens d'utiliser $('.confirm').hide(). et cela a fonctionné pour moi.
success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);
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");
}
});
}
Aucune des solutions ci-dessus ne fonctionnait pour moi, je devais utiliser .then
swal({
title: 'Success!',
text: message,
type: 'success',
confirmButtonText: 'OK'
}).then(() => {
console.log('triggered redirect here');
});
Je pense que ça aidera. C'est la même que celle donnée par M. Barmer. Mais j'ai inclus cela dans les tags php.
Ici ça va ....
<?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;?>