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.
Database Table Code
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>
$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.
Step 3 Ajax and jQuery Code
<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.
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
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
Database 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.
This blog about how to delete a record with animation fade-out effect using Ajax and jQuery. So i prepared this jQuery tutorial delete action with out refreshing page.
Database Table Code :
1 | CREATE TABLE updates( |
Step 1. index.php(user interface page):
1 | 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. |
Step 2. delete.php:
Simple php script delete data from Updates table.
Simple php script delete data from Updates table.
1 | <?php |
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.
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.
1 | <head> |
Step 4.dbconfig.php:
You have to change the database configuration like database name, username and password.
You have to change the database configuration like database name, username and password.
1 | $mysql_hostname = "localhost"; |
Post a Comment