Animated Ajax Record Deletion Using jQuery, Json and PHP

This post is about how to create Animated Ajax Record Deletion Using jQuery, Json and PHP.

Below are step by code so that you can implement it easily in your website.

Step 1:

create a database and add this table in your database with dump.

CREATE TABLE IF NOT EXISTS `shoutbox` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `message` varchar(255) NOT NULL,
  `date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

INSERT INTO `shoutbox` (`id`, `message`, `date`) VALUES
(1, 'hello how are you?', '2013-06-28'),
(2, 'I am fine. what abt you?', '2013-06-28'),
(3, 'I m good. where are you these days?', '2013-06-28'),
(4, 'I am in islamabad ;) . u?', '2013-06-28'),
(5, 'I am in Lhr', '2013-06-28');

Step 2:

First of all include the Jquery library in head section of page and then add this code.

<script type="text/javascript">
$(document).ready(function(){
$("a.delete").live('click',function(){
if(confirm("Are you sure you want to delete this message?"))
var id=$(this).attr("id");
var indx=$("a.delete").index(this);
$.ajax({
type: "POST",
url:"delete.php",
data: { 
'id': id
},
dataType: "json",
cache: false,
success: function(result){
if(result.status==true){
$('.record').eq(indx).animate({
opacity: 0.25
},'slow', function() {
// Animation complete.
$('.record').eq(indx).slideUp('slow').remove();

});
}else if(result.status==false){
alert(result.msg);
}
}
});
});
});
</script>

Step 3:

This is small css for listing you can use your.

#wrapper {
    border: 1px solid #BBBBBB;
    margin-top: 25px;
    padding: 20px;
    width: 600px;
 margin:10px auto;
}
.record {
    border: 1px solid #BBBBBB;
    height: 25px;
    margin-top: 20px;
    padding: 10px;
}

div .record  .msg{
float:left;
}


div .record .delete {
    float: right;
    width: 4%;
}
div .record  img {
    margin-bottom: 5px;
}

Step 4:

Showing data from database.

<div id="wrapper">
<h2 style="text-align:center; text-transform:capitalize;"> Animated Ajax Record Deletion Using jQuery, Json and PHP </h2>
<?php 
$sql="SELECT * FROM `shoutbox` order  by date desc";
$sql_query=mysql_query($sql);
while($rows=mysql_fetch_assoc($sql_query)){
?>
<div  class="record">
<div class="msg"> <?php echo $rows['message'];?> </div>
<a href="javascript:;" class="delete" id="<?php echo $rows['id'];?>"> <img width="20" border="0"  src="delete.jpg" title="Delete" alt="Delete"> </a>
</div>
<?php }?>

</div>

step 5:

This code part delete the record from database if exist.

<?php
header("Content-type:application/json");
$id=intval($_POST['id']);
if(isset($_POST,$_POST['id']) && $_SERVER['REQUEST_METHOD']=='POST' && !empty($id)){
$sql="DELETE FROM `shoutbox` WHERE `shoutbox`.`id` = $id";
$sql_query=mysql_query($sql);
if($sql_query){
echo json_encode(array('status'=>true,'response'=>'success'));exit;
}else{
echo json_encode(array('status'=>false,'response'=>'error','msg'=>mysql_error()));exit;//issue in query
}
}else{
echo json_encode(array('status'=>false,'response'=>'failed','msg'=>"Sorry some unexpected error occur. please try again."));exit;//issue in post value
}
?>

View Demo Download