hrefのリンクにbootbox.jsの確認ボックスを追加します。

Question

htmlテーブルのすべての行にボタンを描画するためにhrefタブを使用しています。ユーザーが行ボタンをクリックすると、HTML GETを使用して行の値を持つ別のPHPスクリプトにリダイレクトされます。しかし、私の現在の実装では、ユーザーがボタンをクリックしたときに確認はありません。私は基本的なjavascriptの確認ボックスを追加しましたが、それはかなり基本的で、ブラウザは毎回警告をポップアップするのをやめるように頼んでいます。

普通のjavascriptを使用する代わりに、私はbootbox.jsと呼ばれるライブラリを見つけました。このライブラリは、CSSアラートと確認ボックス用に特別に設計されています。しかし、現在のjquery実装でブートボックスメソッドを適用すると、動作しません！

bootbox - 以下bootbox docs

は私のコードです：

これはHTMLリンク

echo "<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>"; 

を作り、ここに私のjQueryのコードはbootboxコールが含まれている部分である私のhrefのコードです。

<script type="text/javascript"> 
    $('.confirmation').on('click', function() { 
      return bootbox.confirm('Are you sure?'); 
    }); 
</script> 

Answer 1

1. あなたがリンクをクリックしてのデフォルトの動作を防ぐ必要があります（それ以外のブラウザでは、あなたがそのリンクにリダイレクトされます）。
2. confirm関数は、（確認の結果を処理する）コールバック関数を受け取る必要があります。

チェックこの例：

$('.confirmation').on('click', function (e) { 
 
    e.preventDefault(); 
 
    href = $(this).attr('href'); 
 
    return bootbox.confirm('Are you sure?', function(result) { 
 
    if (result) { 
 
     window.location = href 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css"> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> 
 

 
<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>