web-dev-qa-db-ja.com

Okスイートアラートのボタンをクリックした後、ページをリダイレクトするには？

ページの更新後に甘いアラートを表示できますが、Okボタンをクリックして、ページをリダイレクトするために甘いアラートが表示されます。これで助けてください。

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

コールバック関数を指定するには、オブジェクトを最初の引数として使用し、コールバック関数を2番目の引数として使用する必要があります。

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

関数の前に.then(を置くだけです。 しないタイマー機能を使用する必要があります。例えば：

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

.then機能は、ユーザーがモーダルウィンドウの情報を読み取り、1つのボタンをクリックすることで決定を決定するまで待機するために使用されます。たとえば、YesまたはNoです。

クリック後、Swich Alertはユーザーを別の画面にリダイレクトしたり、新しい質問と後続の質問を含む別のSweet Alertモーダルウィンドウを呼び出したり、外部リンクに移動したりできます。

繰り返しますが、タイマーを使用する必要はありませんユーザーアクションを制御する方がはるかに優れているためです。ユーザーは永遠を待つか、サノスの指のスナップとして行動を起こすことができます。 ????

.thenを使用すると、コードが短くなり、クリーンでエレガントになります。 ;）

28
Alexandre Ribeiro
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">

または、組み込み関数timerを使用できます。

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
Pedro Lobito

Swal（sweatAlert）のデフォルトのコールバック関数ではそれができなかったので、jqueryを強制して、Okの要素を検査するchromeボタンクラスを取得し、次のようにしました。

<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>

Function（isConfirm）の 'Ok'アラートは、この関数に入るかどうかを確認するためのテストでした。もしそうであれば、そこからリダイレクトできるはずですが、そうではありませんでした...

だから、jQueryを使用して、クラスを取得してswalの「OK」ボタンがクリックされたかどうかを判断しました。「。swal2-confirm」は、成功してリダイレクトできました...

これが皆さんのお役に立てば幸いです！

PS：私はphp echoを使用してスクリプトを実行しています。実行するのにphpを離れる必要はありません。単一引用符を使用するだけで完了です。

5
Felipe Pena

最良かつシンプルなソリューション、さらにイベントを追加できます！

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

既存の回答は私にはうまくいきませんでした。$('.confirm').hide()を使用しました。そしてそれは私のために働いた。

success: function(res) {
$('.confirm').hide()
swal("Deleted!", "Successfully deleted", "success")
setTimeout(function(){
window.location = res.redirect_url;
},700);
0
Chidananda Nayak
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
user731591

上記の解決策はどれも私にとってはうまくいきませんでした。thenを使用する必要がありました

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

私はこのコードを使用してそれをしました：

<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>

ありがとう。

0
Y. Joy Ch. Singha
  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
Mohan Raj

これが役立つと思います。バーマー氏の説明と同じです。しかし、これをphpタグで囲みました。

ここに行く...

    <?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
mnis.p