Question

我正在尝试升级我的javascript confirm（）操作以使用Sweet Alert（http://t4t5.github.io/sweetalert/）。目前我的代码是这样的：

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

在导航到删除页面之前，等待用户确认。我想在Sweet Alert中使用这个例子，要求用户在删除前确认：

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

似乎是一个黑客，但它为我工作。

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”函数。（注意范围。$ 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
            }
          });
        });
      }
    }
  }
]);

页面不等待来自javascript Sweet Alert的响应

4 个答案: