web-dev-qa-db-ja.com

SweetAlert2-キャンセルボタンに別のイベントをバインドしますか？

私は素晴らしい SweetAlert2 jqueryプラグインの最新バージョンを使用しています。

2つのボタンを持つシンプルなSweetAlertがあります。 1つは確認ボタン、もう1つはキャンセルボタンです。 htmlオプションを使用して、テキスト入力をアラートに追加しています。ユーザーが確認ボタンを押すと、AJAX呼び出しが実行され、アラートが閉じます。

ここで、アラートを閉じるというデフォルトのアクションの代わりに、キャンセルボタンを使用して他のコードを実行します。 （ユーザーはshowCloseButton：trueを使用してアラートを閉じることができます）。

つまり、閉じるハンドラーを削除して、独自のカスタムハンドラーをswalのキャンセルボタンに追加するにはどうすればよいでしょうか。

buttonsweetalertsweetalert2
8
Piet
  1. カスタムhtmlファイルを作成し、その中にキャンセルボタンを配置して、独自のキャンセルハンドラーを起動できます。

例えば

<html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });

  1. キャンセル時にポップアップを呼び出すだけです。これをswal関数に追加します。

    function (dismiss) {
   if (dismiss === 'cancel') {
      swal({..});            
   }
}
5
Hayden Passmore

カスタム関数を追加して、拒否をキャッチします。次に例を示します。

swal({
   title: 'Some title',
   text: 'some text for the popup',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'Some text for cancel button'
}).then(function(){
   // function when confirm button clicked
}, function(dismiss){
   if(dismiss == 'cancel'){
       // function when cancel button is clicked
   }
});

別のdismissイベントをキャッチする関数を追加することもできます。dismissイベントの詳細については SweetAlert2 Docs を参照してください。

16
Raditya Adi Baskara

@Raditya Adi Baskaraの回答を少しカスタマイズして、

swal({
        title: "$titleWarnignBox",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#36c6d3',
        cancelButtonColor: '#d33',
        confirmButtonText: '$confrimBtn',
        cancelButtonText: '$cancelBtn'
    }).then(function(result){
        if(result.value){
            console.log('good');
        }else if(result.dismiss == 'cancel'){
           console.log('cancel');
        }

    });
10
Hakeem Nofal

スイートアラート2

            swal.fire({
                title: "Notice",
                text: "Are you sure ?",
                showCancelButton: true,
                type: 'error',
                cancelButtonColor: '#d33',
            })
                .then((res) => {
                    if(res.value){
                        console.log('confirmed');
                    }else if(res.dismiss == 'cancel'){
                        console.log('cancel');
                    }
                    else if(res.dismiss == 'esc'){
                        console.log('cancle-esc**strong text**');
                    }
                });
1
shahin developer