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

Posted by : Unknown Minggu, 18 Januari 2009

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

Description: Delete a Record with animation fade-out effect using jQuery and Ajax.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Delete a Record with animation fade-out effect using jQuery and Ajax.