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
ReplyDeleteExcellent job man I like your tutorials. I will definitly use this in one of my projects
ReplyDeleteCool man. :) thanks for this tutorial.
ReplyDeleteToo cool... keep it up !
ReplyDeleteNice an tidy.
ReplyDeleteHi dude, your tutorials are great. Thank you for sharing your knowledge! :)
ReplyDeleteIt is very nice.
ReplyDeletehohohoho nice effect my friend,...
ReplyDeletethanks :)
This work very nice Thanks Dude
ReplyDeletegood job, easy to implement, thanks
ReplyDeleteThanks for sharing.
ReplyDeletehi,
ReplyDeletekindly provide me php mysql codings to edit records and update.
Thanks.
Hy.
ReplyDeleteSow 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?
ReplyDeleteLike it! so easy.
ReplyDeleteHi from Belarus ;)
i can't delete data from my MySql
ReplyDeleteand 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.
ReplyDeleteits gr8 script.....thanx....
ReplyDeletebt 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
ReplyDeletemany thanks bro.. really helped your code and files. going to bookmark your site. Keep sharing nice stuff
ReplyDeleteyeahhhhhhhh regards, Mexico !!
ReplyDeletei can't delete data from my MySql
ReplyDeleteand how to delete it out of MySql?
First of all Thanks Srinivas
ReplyDeleteits nice job
and others Just put
include("dbconfig.php");
into "deleteajax.php" to delete from mysql
This stuff is great...! gud job lol
ReplyDeleteit was helpfull
ReplyDelete