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.
- index.php
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
Download Source Code 
Live DemoDatabase Table Code
CREATE TABLE updates(
ms_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
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'])
$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);
}
?>
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 DemoRelated Links
Twitter Like Parsing URLs with JavaScript.
jQuery Username Live Validation check.
Insert and Load Record using jQuery and Ajax
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.
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.
Modified _GET to _POST
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.
rather than mysql_real_escape_string(), I suggest to use prepared statement to protect your query from malicious activities
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.
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.
kir to on dahanet beshe martike hadaghal ye jori minveshti ke toye IE kar kone
martike kos kesh
kir to kose nanat
The animation is not working in IE???
Help....
really nice jquery animation effect! :)
would be helpful if include sql file
you have forgot
var element = $(this);
this code
.animate({ backgroundColor: "#fbc7c7" }, "fast")
doesn't works in IE
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.
Srinivas :
I implemented your script, but i want to modify it when delete it turns red background. any idea ?
Thanxs
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?
@Gabriel
Turns red backgroud you have to use jquery color plugin with element animate()
Soon I will discuss on "jQuery Basics Series"
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