This post explains you about how to create Animated Ajax Record Deletion Using jQuery PHP.

In this post on the basis of random number we are using 2 type of animated effect.

 

Download Link   Demo Link

 

Sample database design for table name contact.

This table contains  id (primary key),tutorial and link.

CREATE TABLE IF NOT EXISTS `tutorial` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `tutorial` varchar(500) NOT NULL,
  `link` varchar(500) NOT NULL
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

index.php

Contains tutorial display code.

include_once('inc/dbConnect.inc.php');
//connect with database
$query="select * from tutorial";
// query for fetch all tutorial
$res=mysql_query($query);
$count=mysql_num_rows($res);
// check how many tutorial are avaliable

Java Script Code

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
// jquery library file
<script type="text/javascript">
function deleteBox(id){
  if (confirm("Are you sure you want to delete this record?"))
  {
    var dataString = 'id='+ id;
    $("#flash_"+id).show();
    $("#flash_"+id).fadeIn(400).html('<img src="image/loading.gif"/>');
    $.ajax({
           type: "POST",
           url: "delete.php",
           data: dataString,
           cache: false,
           success: function(result){
                if(result){
                    $("#flash_"+id).hide();
                         // if data delete successfully
                         if(result=='success'){
                         //Check random no, for animated type of effect
                         var randNum=Math.floor((Math.random()*100)+1);
                         if(randNum % 2==0){
                               // Delete with slide up effect
                               $("#list_"+id).slideUp(1000);
                         }else{
                               // Just hide data
                               $("#list_"+id).hide(500);
                         }
                    }else{
                         var errorMessage=result.substring(position+2);
                         alert(errorMessage);
                    }
                  }
            }
        });
     }
}
</script>

Display Data

if($count > 0){
   while($tutorial=mysql_fetch_array($res)){
      echo '<div class="list" id="list_'.$tutorial['id'].'">';
      echo '<div class="name"><a href="'.$tutorial['link'].'">'.$tutorial['tutorial'].'</a></div>';
      echo '<div class="flash" id="flash_'.$tutorial['id'].'"></div>';
      echo '<div class="delete"><a href="javascript:void()"><img alt="Delete" title="Delete" width="20" src="image/delete.jpg" onclick=deleteBox("'.$tutorial['id'].'") border="0"></a></div>';
     echo '</div>';
   }
}else{
   echo 'Data Not Found';
}

delete.php
Contains the delete query part.

include_once('inc/dbConnect.inc.php');
 $id=$_POST['id'];
 $query="delete from tutorial where id='$id'";
 $res=mysql_query($query);
 if($res > 0)
    echo "success";
 else{
    echo "Please after some time";
 }