Как сделать окно подтверждения удаления в PHP с помощью SweetAlert2? - PullRequest
Новая
       17

Как сделать окно подтверждения удаления в PHP с помощью SweetAlert2?

0 голосов
/ 20 апреля 2019

Заявление

Сначала я попытался создать окно подтверждения, используя модал начальной загрузки, но оно довольно сложное и сложное для разработки.Позже, когда я просматривал в Интернете некоторые идеи и обнаружил 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>

Ответы [ 2 ]

1 голос
/ 20 апреля 2019

Вот живая демонстрация: Codepen demo

Во-первых, убедитесь, что вы не дублируете html идентификаторы -> используйте 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>
0 голосов
/ 22 апреля 2019

Из ответа @ 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>
...