CODEWITHSUNDEEP
javascriptphphtmlsweetalert2
O San
O San

Reputation: 83

How to do a confirmation box for deleting in PHP by using SweetAlert2?

Statement

At first, I tried to do a confirmation box using bootstrap modal but it quite complicated and hard to design. Later on, while I was browsing the web for some ideas and I found Sweetalert2.

So, I would like to do a confirmation box before deleting by using Sweetalert2 (https://sweetalert2.github.io/) which I just discovered it today(20/4/19) and discovered that it is a really amazing one.

What I have tried so far

In section A where the delete button is located, from the following code, the box didn't show up and skip to do delete action instead.

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>

Upvotes: 0

Views: 133

Answers (2)

O San
O San

Reputation: 83

From @verjas's answer that has some syntax errors, So I tried to make it work and it looks like this...

<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>

Upvotes: 0

verjas
verjas

Reputation: 1793

Here is a live demo: Codepen demo

First, make sure you don't duplicate html ids -> use class="" instead of id="" for similar elements:

<!-- 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>

Notice, to be sure that a confirmation box will be used, I changed the href to #, and put the crimenews_id into data- attribute. Then, update your script to prompt the user before going to delete an item:

<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>

Upvotes: 1

Related Questions