Question

声明

起初，我尝试使用引导程序模版来做一个确认框，但它相当复杂且难以设计。后来，当我浏览网络中的一些想法时，发现了 Sweetalert2 。

因此，我想使用今天刚发现（20/4/19）的 Sweetalert2 （https://sweetalert2.github.io/）进行确认之前的确认框一个非常了不起的人。

到目前为止我尝试过的事情

在下面的代码中，位于删除按钮的A部分中，该框没有显示，而是跳过以执行删除操作。

Front.php

<html> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!--Sweetalert2 css and js files-->
<link rel="stylesheet" href="sweetalert2.min.css">
<script type="text/javascript" src="sweetalert2.min.js"></script>

<body>
<!--Table-->
     <div class="table-responsive">
         <table class="table table-hover table-fixed w-auto" border="2" align="center" style="color: white">
                <!--Header-->
                <thead>
                       <tr>
                            <th><center>ID</center></th>
                            <th><center>Type</center></th>
                            <th><center>URL</center></th>
                            <th><center>Issued date</center></th>
                            <th><center>Lattitude</center></th>
                            <th><center>Longitude</center></th>
                            <th colspan="2"><center>Action</center></th>
                       </tr>
                </thead>
                       <!--Queries-->
                       <?php

                            for($i=0;$i<count($results->data);$i++):
                                $news = $results->data[$i];
                       ?>
                                <tbody>
                                       <tr>
                                            <td><b><?php echo $news['crimenews_id'];?></b></td>
                                            <td><?php echo $news['crimenews_cat'];?></td>
                                            <td><?php echo $news['crimenews_url'];?></td>
                                            <td><?php echo $news['crimenews_datetime'];?></td>
                                            <td><?php echo $news['crimenews_locationLat'];?></td>
                                            <td><?php echo $news['crimenews_locationLong'];?></td>
                                            <td>
                                                <a href="front.php?edit_id=<?php echo $news['crimenews_id'];?>" class="btn btn-info" style="border:2px solid black"><b>Edit&emsp;&ensp;<i class="far fa-edit"></i></b></a>
                                       <!-------------------------------------Section A-------------------------------------------------------------------------------------------------------------------------------------------------->
                                                <a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Delete&ensp;<i class="fas fa-trash-alt"></i></b></a>
                                       <!-------------------------------------End Section A---------------------------------------------------------------------------------------------------------------------------------------------->
                                            </td>
                                       </tr>
                                </tbody>
                            <?php endfor ?>
                    </table>
         </div>
</body>
</html>
<script>
$('#Test').click(function(e) // I do not sure about this line
{
  e.preventDefault();
  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    allowOutsideClick : true,
    allowEscapeKey : true,
    confirmButtonColor: 'btn btn-primary',
    cancelButtonColor: 'btn btn-danger',
    confirmButtonText: 'Sure'
    })
})
</script>

Answer 1

这是现场演示：Codepen demo

首先，请确保您不要重复html ID ->对于相似的元素，请使用class=""而非id=""：

<!-- OLD: 
<a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Delete&ensp;<i class="fas fa-trash-alt"></i></b></a>
-->
<!-- new: -->
<a href="#" data-target="<?php echo $news['crimenews_id'];?>" class="prompt-delete btn btn-danger" style="border:2px solid black;"><b>Delete&ensp;<i class="fas fa-trash-alt"></i></b></a>

注意，为确保使用确认框，我将href更改为＃，并将crimenews_id放入data-属性中。然后，更新脚本以提示用户，然后再删除项目：

<script>
$(".prompt-delete").click(function() {
  // get the target id to delete
  var target_id = $(this).data("target");
  // prepare the url to redirect in case of deleting an item
  var url_delete = "process.php?process.php?delete_id=" + target_id;

  // initialize confirmation box
  Swal.fire({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    type: "warning",
    showCancelButton: true,
    allowOutsideClick: true,
    allowEscapeKey: true,
    confirmButtonColor: "btn btn-primary",
    cancelButtonColor: "btn btn-danger",
    confirmButtonText: "Sure",
    onClose: function(e) {
      console.log(e);
    }
  }).then(result => {
    if (result.value) {
      // if CONFIRMED => go to delete url
      window.location = url_delete;
    }
  });

});
</script>

Answer 2

在@verjas的答案中存在一些语法错误，因此我尝试使其正常工作，看起来像这样...

<a href="javascript:void(0)" data-id="<?php echo $news['crimenews_id'];?>" class="btn btn-danger remove" style="border:2px solid black;font-size:1em"><b><i class="fas fa-trash-alt"></i></b></a>

<script>
$(".remove").click(function()
{
      var num = $(this).data("id");
      var url = "process.php?delete_id=" + num;

      Swal.fire({
      titleText: "Are you sure for deleting this?",
      text: "This action cannot be reverted.",
      type: 'warning',
      showCancelButton: true,
      showCloseButton : true, //Close button at the top-right corner.
      allowEscapeKey     : true, //Press ESC to cancel
      focusCancel : true, //Prevent unexpected delete due to mistakes.
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sure',
      }).then(result =>
        {
             if(result.value) 
             {
                window.location = url_delete;
             }
      });
});
</script>

如何通过使用SweetAlert2在PHP中删除一个确认框？

2 个答案: