9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Sunday, January 18, 2009

Delete a Record with animation fade-out effect using jQuery and Ajax.

Are you like Twitter and Yammer API? This post about how to delete a record with animation fade-out effect using Ajax and jQuery. I like Twitter API very much, it's clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.

Part II: Delete Records with Random Animation Effect using jQuery and Ajax.

This is a simple tutorial just change some lines of database code! I was developing some what Twitter like API. Today I published small part that explains how to Delete a Record with animation fade-out effect using jQuery and Ajax.

The tutorial contains a folder called posting with three PHP files and one sub folder js includes jQuery plugin.

- index.php
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
Download Source Code     Live Demo

Database Table Code
CREATE TABLE updates(
ms_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);



Step 1. index.php(user interface page)
Here Displaying records form database using while loop. Delete button included in <a> anchor tag attribute id=<?php echo $row['ms_id']; ?>. This we are passing to delete.php page.

<body> 

<form action="" method="post">
<span class="what">What are you doing?</span>
<textarea  =""  cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
<input type="submit" value=" Update "  class="update_button" />
</form>

<?php
include("dbconfig.php");
$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
?>
<tr><td><?php echo $message; ?></td><td><a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
<?php
}
?>

</body>

Step 2. delete.php
Simple php script delete data from Updates table.
<?php
include("dbconfig.php");
if($_POST['id'])
{
$id=$_POST['id'];

$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);
}
?>

Step 3 Ajax and jQuery Code
Included jQuery plugin in head tag and ajax code included in this jquery function $(".delbutton").click(function(){}- delbutton is the class name of anchor tag. Using element.attr("id") calling delete button value.

<head>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" 
$(function() {

$(".delbutton").click(function(){
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>


</head>


Step 4.dbconfig.php
You have to change the database configuration like database name, username and password.

Download Source Code     Live Demo



Related Links

Twitter Like Parsing URLs with JavaScript.
jQuery Username Live Validation check.
Insert and Load Record using jQuery and Ajax
Comments
{ 35 comments }
Anonymous said...

Well, back to school for you.

1 - Do not use $_GET for these kind of state changes

2 - Learn about Cross site scripting

3 - Learn about Cross site request forgeries.

Anonymous said...

Oh, and

4 - learn how to protect your application from SQL injections

/me cries.

These kind of tuturials is what leads herds of PHP beginners to the cliffs.

Srinivas Tamada said...

Modified _GET to _POST

FraggeR said...

Please....
$id = mysql_escape_String($id);

$_POST helps to protect against script kids, but it isnt a problem to simulate a post to a file.

another way to secure this is to use session vars, one should be set at page, this should be checked at ajax script side.

Roshan Bhattara said...

rather than mysql_real_escape_string(), I suggest to use prepared statement to protect your query from malicious activities

insane said...

mvc mayvbe ? that php looks awfull.

I will recommend also to use another way to handdle your db connection, maybe a wrapper class or a good framework that do it for you?

Shink and Encrypt your Js files.

Usea time records & ip´s fields for you deletes,inserts,etc..

Pd. Please do somenthing with that bloddy php.

pcdinh said...

The author should state that this article is written by a beginner for beginners but for demonstration purpose. Lot of bad practices, security issues. Please do not copy and paste.

Anonymous said...

kir to on dahanet beshe martike hadaghal ye jori minveshti ke toye IE kar kone
martike kos kesh
kir to kose nanat

Niju Mohan said...

The animation is not working in IE???

Help....

danilo said...

really nice jquery animation effect! :)

Anonymous said...

would be helpful if include sql file

Anonymous said...

you have forgot

var element = $(this);

Anonymous said...

this code
.animate({ backgroundColor: "#fbc7c7" }, "fast")
doesn't works in IE

Tejas Mehta said...

Hi,

I have just started to learn jQuery. This is really very nice. Now i have another type of question. My question is like...

when i click on delete it just deletes but in some cases i have t check that weather this id is associated with some other table and if it is with some important table than it wont get deleted. so is it possible to do this ? and if it than how ? record must not be deleted when it is associated with other table.

Do let me know.
Thank you.

Gabriel said...

Srinivas :

I implemented your script, but i want to modify it when delete it turns red background. any idea ?

Thanxs

Anonymous said...

Tejas Mehta .... couldnt you add a field to your table for example ... 'important' then if when inserting you get a few queiries to check if it is important and if so make it equal ='1' ...if not then make it equal ='0'. Then when this script deletes just make the query check to see if important ='0' ...if so delete else show error/dont delete?

Srinivas Tamada said...

@Gabriel

Turns red backgroud you have to use jquery color plugin with element animate()

Soon I will discuss on "jQuery Basics Series"

Justin said...

Hiya,


Ive tried to use this code along with your comment slide down script and they dont seem to like each other. When I insert the code from this in the header it shows a blank screen.

Is there a reason for this? Im new to ajax and thought the class would stop each of the insert and delete from clashing?

Thanks

Karl said...

hey, this is really great tutorial. I was able to get it thru. thanks for your time and help.

It doesn't work for the new records added with the tutorial we have on your site. The deletion works if we reload the page though.

Any light you can provide on it really be wonderful.

Thanks again Srinivas for the great work here!

gAz said...

EXCELLENT work man!!!!
you saved me here.

Anonymous said...

Instead of mysql_real_escape_string(), please use intval()

Anonymous said...

awesome =D

sboniso said...

Hi

I try using your code, but it display the alert box after that nothing happens.

Thank you

sboniso said...

Hi

I Tryed you code but it displays the alert box but I doesnt delete

Please help

Srinivas Tamada said...

@sboniso

Try this below tutorials new Version

http://www.9lessons.info/2009/07/delete-records-with-random-animation.html

RinBee said...

how this work on IE?

Anonymous said...

thank you.

Pawan Sharma said...

Hello,

its good on firefox but it not proper work on IE.

Thanks

Lena said...

I can't get this to work. Does this code work or did I do a mistake?

Namal Attanayake said...

var del_id = element.attr("id"); this part is not working in my code. I changed it to var del_id = $("a").attr("id"); now that is working? what is the wrong with that?

pouf said...

I have understand all this tuto but it's not very detailed...thank you as well :)

onnplay said...

Easy to understand. Can you add edit and update too.

Anonymous said...

very nice tutorials.it's really helpful for beginner.....thank you

Anonymous said...

Hi,
this correct line:
var del_id = $(this).attr("id");

Unknown said...

i tried this code is working, it can delete a record but the animation is not working. how i can fix it please?

Post a Comment