Delete Records with Color Change Effect using jQuery and Ajax
Wall Script
Follow Me:
Friday, November 26, 2010

Delete Records with Color Change Effect using jQuery and Ajax

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.

delete records before color change

Download Script     Live Demo

Database Table Code
A simple database table two columns msg_id and message.
CREATE TABLE updates(
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>

deleteajax.php
Contains PHP code. Delete record from the database.
<?php
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;}
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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


26 comments:

  1. Excellent job man I like your tutorials. I will definitly use this in one of my projects

    ReplyDelete
  2. Cool man. :) thanks for this tutorial.

    ReplyDelete
  3. Hi dude, your tutorials are great. Thank you for sharing your knowledge! :)

    ReplyDelete
  4. hohohoho nice effect my friend,...
    thanks :)

    ReplyDelete
  5. This work very nice Thanks Dude

    ReplyDelete
  6. good job, easy to implement, thanks

    ReplyDelete
  7. Thanks for sharing.

    ReplyDelete
  8. hi,
    kindly provide me php mysql codings to edit records and update.
    Thanks.

    ReplyDelete
  9. Hy.
    Sow do you secure your deleteajax.php file?

    ReplyDelete
  10. 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?

    ReplyDelete
  11. Like it! so easy.
    Hi from Belarus ;)

    ReplyDelete
  12. i can't delete data from my MySql
    and how to delete it out of MySql

    ReplyDelete
  13. Is anywhere on this website available script for voting "for" and "against". Like in image of this article (green and red thumbs). Thanks.

    ReplyDelete
  14. 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...

    ReplyDelete
  15. hey Cool one man .. But its not working for me on IE please help me on this

    ReplyDelete
  16. many thanks bro.. really helped your code and files. going to bookmark your site. Keep sharing nice stuff

    ReplyDelete
  17. yeahhhhhhhh regards, Mexico !!

    ReplyDelete
  18. i can't delete data from my MySql
    and how to delete it out of MySql?

    ReplyDelete
  19. First of all Thanks Srinivas

    its nice job

    and others Just put

    include("dbconfig.php");


    into "deleteajax.php" to delete from mysql

    ReplyDelete
  20. This stuff is great...! gud job lol

    ReplyDelete

Make in India