This post is an update of my previous post Delete Records animation effect with jquery. I had added new feature records delete with color change animation effect using jquery beforeSend method and color plugin. It is very useful to display loading status messages or effects before getting the ajax success request.
Download Script 
Live DemoDatabase Table Code
A simple database table two columns msg_id and message.
CREATE TABLE updates(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
jQuery code
Contains javascipt code. $(".delete_button").click(function(){}- delete_button is the class name of anchor tag (X). Using element.attr("id") calling delete button value.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
return false;
});
});
</script>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
}
});return false;
});
});
</script>
deleteajax.php
Contains PHP code. Delete record from the database.
<?php
include("dbconfig.php");
if($_POST['id'])
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>
include("dbconfig.php");
if($_POST['id'])
{
$id=$_POST['id'];$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>
CSS Code
You should use background-color here otherwise jquery.color.js could not work.
*{margin:0;padding:0;}
list-style:none;font-size:1.2em;
}
height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
margin-left:10px;
font-weight:bold;
float:right;
}
ol.update
{list-style:none;font-size:1.2em;
}
ol.update li
{ height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}
#main
{width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{margin-left:10px;
font-weight:bold;
float:right;
}
Nice work thanks
Excellent job man I like your tutorials. I will definitly use this in one of my projects
Cool man. :) thanks for this tutorial.
Too cool... keep it up !
Nice an tidy.
Hi dude, your tutorials are great. Thank you for sharing your knowledge! :)
It is very nice.
hohohoho nice effect my friend,...
thanks :)
This work very nice Thanks Dude
good job, easy to implement, thanks
thanks
Thanks for sharing.
hi,
kindly provide me php mysql codings to edit records and update.
Thanks.
Hy.
Sow do you secure your deleteajax.php file?
Hy. I am looking for a solution to secure the deleteajax.php file. Everybody can insert the link to this file in browser and can run that script, and I'm sure that there is a way for downloading that file and this is not ok from the moment that this contains mysql querys. Can you please help me with this problem?
Like it! so easy.
Hi from Belarus ;)
i can't delete data from my MySql
and how to delete it out of MySql
Is anywhere on this website available script for voting "for" and "against". Like in image of this article (green and red thumbs). Thanks.
its gr8 script.....thanx....
bt the problem i am facing is that i want to delete tr but this scripts only delete the td part.....plz help me out in this...
hey Cool one man .. But its not working for me on IE please help me on this
many thanks bro.. really helped your code and files. going to bookmark your site. Keep sharing nice stuff
yeahhhhhhhh regards, Mexico !!
i can't delete data from my MySql
and how to delete it out of MySql?
First of all Thanks Srinivas
its nice job
and others Just put
include("dbconfig.php");
into "deleteajax.php" to delete from mysql