页面不在等待SweetAlert确认窗口的响应

Question

我正在尝试将我的JavaScript confirm()操作升级为使用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");  
  } 
});

我尝试过的一切都失败了。当显示第一个警报时，页面前进，删除了该项目并刷新，甚至在用户单击警报按钮之前。如何使页面等待用户输入？

任何帮助将不胜感激。

Answer 1

您不能将其用作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");
});

您还必须将您的delete.php修复为仅接受POST请求。允许GET请求删除资源是一个巨大的问题。 Google或任何其他搜寻器第一次找到您的页面时，它将查看文档中每个链接的href，并关注每个链接，删除所有内容。它们不会被confirm框阻止，因为它们（除了Google之外）可能不会评估任何JavaScript。

Answer 2

您可以这样操作。

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;
});

似乎是一个hack，但对我有用。

Answer 3

$('.delete').click(function () {
var id = this.id;
swal({
  title: "Are you sure?",
  text: "Your will not be able to recover this post!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
   alert(id);
});
});


<a id="<?php echo $row->id_portfolio ?>" class=" delete">

Answer 4

这是Angular指令中的一个示例（因为SweetAlert是通过angular指令包装器提供的）。这是在JavaScript中执行此操作的一种“优雅”方法。在click事件上，有一个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
            }
          });
        });
      }
    }
  }
]);