Confirmation alert Before Delete record with jQuery AJAX

It is safe to display confirmation alert before deleting a record from MySQL database table.

If the user has accidentally clicked the delete button on the wrong record then it has a choice whether to delete or cancel it.

Confirm box can easily add using confirm() method.

But in this tutorial, I am using Bootstrap Bootbox.js library to display confirm box.

With jQuery AJAX delete a record from the MySQL database with PHP on confirmation.

Confirmation alert before delete record with jQuery AJAX


Contents

  1. Table structure
  2. Configuration
  3. Download & Include
  4. HTML & PHP
  5. PHP
  6. jQuery
  7. Demo
  8. Conclusion

 


1. Table structure

I am using posts table in the example.

CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. Download & Include

  • Download Bootbox.js from here.
  • Include with Bootstrap and jQuery library.
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='bootstrap/js/bootstrap.min.js'></script> 
<script src='bootbox.min.js'></script>

4. HTML & PHP

Fetch records from posts table and list in the <table>.

Add a delete button <button class='delete'> on each row where use the $id to set id attribute value del_<?= $id ?>.

Completed Code

<?php 
include "config.php";
?>
<div class='container'>
  <table border='1' class='table'>
    <tr style='background: whitesmoke;'>
      <th>S.no</th>
      <th>Title</th>
      <th>Operation</th>
    </tr>

    <?php 
    $query = "SELECT * FROM posts";
    $result = mysqli_query($con,$query);

    $count = 1;
    while($row = mysqli_fetch_assoc($result) ){
       $id = $row['id'];
       $title = $row['title'];
       $link = $row['link'];

    ?>
    <tr>
       <td align='center'><?= $count ?></td>
       <td><a href='<?= $link ?>' target='_blank'><?= $title ?></a></td>
       <td align='center'>
        <button class='delete btn btn-danger' id='del_<?= $id ?>'>Delete</button>
       </td>
    </tr>
    <?php
      $count++;
    }
    ?>
  </table>
</div>

5. PHP

Create a new ajaxfile.php file.

Delete a record from the posts table according to the $_POST['id'].

Completed Code

<?php 
include "config.php";

$id = $_POST['id'];

// Delete record
$query = "DELETE FROM posts WHERE id=".$id;
mysqli_query($con,$query);

echo 1;

6. jQuery

On the button click split the id to get the deleteid.

Show confirmation box by calling bootbox.confirm() method.

If clicked on the OK button from confirm box then send an AJAX to delete a record. On successful callback remove <tr>.

Completed Code

$(document).ready(function(){

  // Delete 
  $('.delete').click(function(){
    var el = this;
    var id = this.id;
    var splitid = id.split("_");

    // Delete id
    var deleteid = splitid[1];
 
    // Confirm box
    bootbox.confirm("Are you sure want to delete?", function(result) {
 
       if(result){
         // AJAX Request
         $.ajax({
           url: 'ajaxfile.php',
           type: 'POST',
           data: { id:deleteid },
           success: function(response){

             // Removing row from HTML Table
             $(el).closest('tr').css('background','tomato');
             $(el).closest('tr').fadeOut(800, function(){ 
               $(this).remove();
             });

           }
         });
       }
 
    });
 
  });
});

7. Demo

Click on the Delete button. View in a new tab.


8. Conclusion

If you are not using Bootstrap in your webpage then use confirm() method. Send your AJAX request to delete the record when confirm() method returns true.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  • 2
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. Orpee said:

    Not working. Can you check the code pls?

    May 16, 2018
    Reply
    • Yogesh Singh said:

      I rechecked the code it is working fine.

      What issue are you getting?

      May 16, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *