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
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.
Related 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.
ReplyDelete1 - 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
ReplyDelete4 - 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
ReplyDeletePlease....
ReplyDelete$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
ReplyDeletemvc mayvbe ? that php looks awfull.
ReplyDeleteI 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.
ReplyDeletekir to on dahanet beshe martike hadaghal ye jori minveshti ke toye IE kar kone
ReplyDeletemartike kos kesh
kir to kose nanat
The animation is not working in IE???
ReplyDeleteHelp....
really nice jquery animation effect! :)
ReplyDeletewould be helpful if include sql file
ReplyDeleteyou have forgot
ReplyDeletevar element = $(this);
this code
ReplyDelete.animate({ backgroundColor: "#fbc7c7" }, "fast")
doesn't works in IE
Hi,
ReplyDeleteI 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 :
ReplyDeleteI 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?
ReplyDelete@Gabriel
ReplyDeleteTurns red backgroud you have to use jquery color plugin with element animate()
Soon I will discuss on "jQuery Basics Series"
Hiya,
ReplyDeleteIve 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
hey, this is really great tutorial. I was able to get it thru. thanks for your time and help.
ReplyDeleteIt 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!
EXCELLENT work man!!!!
ReplyDeleteyou saved me here.
Instead of mysql_real_escape_string(), please use intval()
ReplyDeleteawesome =D
ReplyDeleteHi
ReplyDeleteI try using your code, but it display the alert box after that nothing happens.
Thank you
Hi
ReplyDeleteI Tryed you code but it displays the alert box but I doesnt delete
Please help
@sboniso
ReplyDeleteTry this below tutorials new Version
http://www.9lessons.info/2009/07/delete-records-with-random-animation.html
how this work on IE?
ReplyDeletethank you.
ReplyDeleteHello,
ReplyDeleteits good on firefox but it not proper work on IE.
Thanks
I can't get this to work. Does this code work or did I do a mistake?
ReplyDeletevar 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?
ReplyDeleteI have understand all this tuto but it's not very detailed...thank you as well :)
ReplyDeleteEasy to understand. Can you add edit and update too.
ReplyDeletevery nice tutorials.it's really helpful for beginner.....thank you
ReplyDeleteHi,
ReplyDeletethis correct line:
var del_id = $(this).attr("id");
i tried this code is working, it can delete a record but the animation is not working. how i can fix it please?
ReplyDeleteThis tip is helpful, guy... Thanks, it works for me.
ReplyDeleteExcellent script. Was wondering how hard it would be to do the same but for deleting records from one area on the page and adding to another.
ReplyDelete$prefix : why is this used???
ReplyDelete