个人中心
gpt4 book ai didi

javascript - 如何使用SweetAlert2在PHP中制作删除确认框？

转载 作者：行者123 更新时间：2023-12-02 23:47:47 25 4
gpt4 key购买 nike

声明

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

所以，我想在删除之前使用 Sweetalert2 ( https://sweetalert2.github.io/ ) 做一个确认框，我今天(20/4/19)刚刚发现它，并发现它确实是一个太棒了。

到目前为止我已经尝试过

在删除按钮所在的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>

最佳答案

这是一个现场演示: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>

关于javascript - 如何使用SweetAlert2在PHP中制作删除确认框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55775036/

25 4 0
文章推荐： javascript - 如何返回上一页，但不计算js中的url变量
文章推荐： elasticsearch - 如何使用Elasticsearch 7+ Java API在对象内搜索数据
文章推荐： audio - 测量数字滤波器传递函数的最有效方法
文章推荐： javascript - 如何调试 ReactJs/Redux 中浏览器网络操作的意外时间间隙？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com