10

JavaScriptconfirm()アクションをアップグレードしてSweetAlertを使用しようとしています。現在、私のコードは次のようなものです：

<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>

これは、削除ページに移動する前に、ユーザーが確認するのを待ちます。SweetAlert のこの例を使用して、削除する前にユーザーに確認を求めたいと思います。

swal({
 title: "Are you sure?",   
 text: "You will not be able to recover this imaginary file!",   
 type: "warning",   
 showCancelButton: true,   
 confirmButtonColor: "#DD6B55",   
 confirmButtonText: "Yes, delete it!",   
 cancelButtonText: "No, cancel plx!",   
 closeOnConfirm: false,   
 closeOnCancel: false 
}, 
function(isConfirm){   
  if (isConfirm) {     
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } 
  else {     
    swal("Cancelled", "Your imaginary file is safe :)", "error");  
  } 
});


私が試したことはすべて失敗しました。最初のアラートが表示されたとき、ページはアイテムを削除し、ユーザーがアラート ボタンをクリックする前に更新されました。ページがユーザーの入力を待つようにするにはどうすればよいですか?

どんな助けでも大歓迎です。

4

4 に答える 4

6

これを のドロップイン代替品として使用することはできませんconfirm。confirmダイアログが確認されるまで単一スレッドの実行をブロックするため、JavaScript/DOM ベースのダイアログで同じ動作を生成することはできません。

アラート ボックス/delete.php?id=100の成功コールバックでリクエストを発行する必要があります。

それ以外の...

swal("Deleted!", "Your imaginary file has been deleted.", "success");

あなたが必要

<a href="#">Delete<a>
...

$.post('/delete.php?id=100').then(function () {
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

また、リクエストのみを受け入れるように修正する必要があります。リソースを削除するリクエストを許可することは大きな問題です。Google や他のクローラーが初めてページを見つけると、ドキュメント内のすべてのリンクを調べて各リンクをたどり、すべてのコンテンツを削除します。おそらく (Google を除いて) JavaScript を評価しないため、ボックスによって停止されることはありません。delete.phpPOSTGEThrefconfirm

于 2015-01-16T15:42:44.097 に答える
5

このようにできます。

HTML:

<a href="/delete.php?id=100" class="confirmation" >Delete</a>

JS:

$('.confirmation').click(function (e) {
    var href = $(this).attr('href');

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: true,
        closeOnCancel: true
    },
            function (isConfirm) {
                if (isConfirm) {
                    window.location.href = href;
                }
            });

    return false;
});

ハックのようですが、私にとってはうまくいきます。

于 2016-03-31T11:34:07.647 に答える
0

Angular ディレクティブの例を次に示します (SweetAlert は angular ディレクティブ ラッパーを介して提供されるため)。これは、JavaScript でこれを行うための「エレガントな」方法の 1 つです。クリック イベントには e.stopImmediatePropagation() があり、ユーザーが確認すると、「ng-click」関数が評価されます。(scope.$eval は JavaScript eval() ではないことに注意してください)。

マークアップ: <i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>

シンプルな「クリック確認」ディレクティブ:

/**
 * Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
 */
angular.module('myApp.directives').directive('confirmClick', [
  'SweetAlert',
  function (SweetAlert) {
    return {
      priority: -1,
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('click', function (e) {
          e.stopImmediatePropagation();
          e.preventDefault();

          var message = attrs.confirmClick || 'Are you sure you want to continue?';

          SweetAlert.swal({
            title: message,
            type: 'warning',
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true
          }, function (isConfirm) {
            if (isConfirm) {
              if(attrs.ngClick) {
                scope.$eval(attrs.ngClick);
              }
            } else {
              // Cancelled
            }
          });
        });
      }
    }
  }
]);
于 2016-11-04T16:49:21.503 に答える