Remove data in a div after successfully deleted using Jquery

• Tweet

• Tweet

I was recently implementing an Ajax-based Record deletion system for my final year project using Jquery .This works similar to the wordpress method of  articles/category deletion with a color  animation before deleting the rows .Lately,Twitter has also implemented such functionality .In this article,I will fully demonstrate how to achieve this using PHP,Jquery and MySQL .You can view a working demo online or you can download the full source code and test it on your own server . Please not that the online demo does not actually delete the data from the database .

Download Source Code || View Demo Online

Step 1 : Create a Database Called “peaple”

SET FOREIGN_KEY_CHECKS=0;

-- Table structure for `members`

DROP TABLE IF EXISTS `members`;
CREATE TABLE `members` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

-- Records of members

INSERT INTO `members` VALUES ('1', 'Hyder Bangash');
INSERT INTO `members` VALUES ('2', 'Steve Jobs');
INSERT INTO `members` VALUES ('3', 'Bill Gates');

Step 2 : Create A database Connection File called : mysqli_connect.php

This file will  contain  the database access information,selects the database  and  also establishes a connection to MySQL .

// Set the database access information asconstants:
DEFINE ('DB_USER', 'root');//Database Username
DEFINE ('DB_PASSWORD', "'');//Database Password
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'peaple');//Database Name

// Make the connection:
$dbc = @mysqli_connect (DB_HOST, DB_USER,DB_PASSWORD, DB_NAME);

if (!$dbc) {
trigger_error ('Could not connect to MySQL: ' . mysqli_connect_error() );
}
?>

Step 3 : Create a file “delete.php”

This file contain codes to remove a specific row in the database .It will be called via Ajax .

<?php
include_once('mysqli_connect.php');
if(isset($_GET['delete']))
{
$query = 'DELETE FROM students WHERE  id = '.(int)$_GET['delete'];
$result = mysqli_query($dbc,$query);
}
?>

Step 4: Create a file “index.php”

This will be the main file which will display the rows  .It also contains the Jquery Library,and jquery.color.js which is responsible for the color animation before deleting a specific row .

//Insert this code in your header section of your index.php file

$(document).ready(function() {//When the dom is ready

$('a.remove').click(function(e) {//On clicking the Red Cross Image

e.preventDefault();//Prevent the default browser on clicking a link
var parent = $(this).parent();
$.ajax({//Make the Ajax call
type: 'get',
url: 'delete.php',
data: 'delete=' + parent.attr('id').replace('row-',''),//Get the div id in which there is the hyperlink
beforeSend: function() {
parent.animate({'backgroundColor':'yellow'},300);//Change color to yellow
},
success: function() {//IF successfull

parent.slideUp(300,function() {
parent.remove();//Remove the div
});
}
});
});
});

Insert this code in the body section

The code below will loop through each record in the database and display it on  your page .

include_once('mysqli_connect.php');
$query = 'SELECT * FROM `members`';
$result = mysqli_query($dbc,$query);
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
echo '<div style="width:425px;" id="row-',$row['id'],'">
<a href="delete.php?delete='.$row['id'].'" ><img border="0" src="cross.png" /></a>
<strong>',$row['name'],'</strong>
</div>';
}

If you have any problem ,questions drop a comment below i will be glad to help you .

Related Posts

1. Delete Tabular Data using PHP/Jquery with confirmation dialog box