页面未等待 SweetAlert 确认的响应 window

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-based 对话框产生相同的行为。

您需要在警告框的成功回调中向/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 或任何其他抓取工具第一次找到您的页面时，它会查看文档中每个 link 的 href 并 关注每个 link，删除您的所有内容。它们不会被 confirm 框阻止，因为它们可能（Google 除外）不会评估任何 JavaScript.

Answer 2

$('.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 3

你可以这样做。

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 4

这是 Angular 指令中的示例（因为 SweetAlert 是通过 angular 指令包装器提供的）。这是在 JavaScript 中执行此操作的一种 'elegant' 方法。在单击事件上，有一个 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" 指令：

/**
 * 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
            }
          });
        });
      }
    }
  }
]);

页面未等待 SweetAlert 确认的响应 window

Page is not waiting for response from SweetAlert confirmation window

javascript

sweetalert