In this article we are going to show you how to delete data without page refresh in PHP using Ajax. Delete with ensure box, here we have a tendancy to area unit planning to see regarding a way to delete the data while not refreshing page and with confirmation box, and this is often what most of them looking , therefore these days planning to show you that, a way to build this alert box with ajax. i will show you how you can delete table rows from database using PHP and Ajax. the intersting thing here is that we will be able to delete the rows without refreshing the page and present some animation while deleting those rows. this example we will fetch the data from the database and display the data list with delete button. by this button user can delete data from the database. All operation will happen on a single page without page refresh. Let’s start the step by step guid on How to delete data without page refresh in php using Ajax.
How to Delete Data without page refresh in PHP using Ajax
In today’s post i am planning to share the foremost helpful jQuery functions $.ajax() and $.post , victimization these two functions you will submit the PHP web forms while not refreshing the webpage,
Create Login CRUD System using PHP MySQL
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “db_search”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Oct 07, 2016 at 08:23 PM -- Server version: 10.1.13-MariaDB -- PHP Version: 7.0.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `db_search` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_member` -- CREATE TABLE `tbl_member` ( `tbl_member_id` int(11) NOT NULL, `tbl_member_name` varchar(100) NOT NULL, `tbl_member_contact` varchar(100) NOT NULL, `tbl_member_added` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tbl_member` -- INSERT INTO `tbl_member` (`tbl_member_id`, `tbl_member_name`, `tbl_member_contact`, `tbl_member_added`) VALUES (5, 'Alkesh Singham', '9854500524', '0000-00-00 00:00:00'), (6, 'Deepak Raj', '8545005272', '0000-00-00 00:00:00'), (7, 'Abhinandan Singh', '9169908545', '2016-10-19 00:00:00'), (8, 'Saddam Khan', '8754698548', '2016-10-24 03:05:20'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_member` -- ALTER TABLE `tbl_member` ADD PRIMARY KEY (`tbl_member_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_member` -- ALTER TABLE `tbl_member` MODIFY `tbl_member_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “db_search”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Db file in Downloaded source code Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating database connection using php copy the below code and save it is as “database.php”.
<?php
$database = new PDO("mysql:host=localhost;dbname=db_search", 'root', '');
?>
3- Creating Header.php
in this step we are going to create header file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Delete without Refreshing Page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css">
</head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/DT_bootstrap.js"></script>
<?php include 'database.php'; ?>
4 – Display Data in table From Databse
in this step we are going to fetch all data from database and display in Table.
<table class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Name</th>
<th>Mobile No.</th>
<th>Date Added</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$result = $database->prepare ("SELECT * FROM tbl_member");
$result ->execute();
for ($count=0; $row_member = $result ->fetch(); $count++){
$id = $row_member['tbl_member_id'];
?>
<tr class="delete_mem<?php echo $id ?>">
<td><?php echo $row_member['tbl_member_name']; ?></td>
<td><?php echo $row_member['tbl_member_contact']; ?></td>
<td><?php echo date("M d, Y h:i:s A", strtotime ($row_member['tbl_member_added'])); ?></td>
<td width="80">
<a class="btn btn-success" id="<?php echo $id; ?>">Delete</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
5 – Create Javascript Code For Delete without page refresh
You will need some javascript for the event handler for the delete button, handling the response from the server and for attaching the event to the handler perform to the button. My convention once operating with mythical being is to call my function send_ACTION() and recieve_ACTION(), as you will see below..
<script type="text/javascript">
$(document).ready(function() {
$('.btn-success').click(function() {
var id = $(this).attr("id");
if (confirm("Are you sure you want to delete this Member?")) {
$.ajax({
type: "POST",
url: "delete_member.php",
data: ({
id: id
}),
cache: false,
success: function(html) {
$(".delete_mem" + id).fadeOut('slow');
}
});
} else {
return false;
}
});
});
</script>
6 – Delete Data From database using PHP
in this step we are going create a script using php who delete data from database.
<?php
include ('database.php');
$id = $_GET['id'];
$delete_data"delete from tbl_member where tbl_member_id = '$id' ";
$database->exec($delete_data);
?>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.
Great Tutorial…!
Fantastic tutorial, I downloaded the tutorial and found it very useful, just one problem when I click on the delete button the row gets deleted but if I refreshed the page its back, it doesn’t get deleted from database.
in delete_member.php file replace
$id = $_GET[‘id’];
with
$id = $_POST[‘id’];
Great, very useful!!!