Delete a Record with animation fade-out effect using jQuery and Ajax.
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
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


38 comments:

  1. 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.

    ReplyDelete
  2. 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.

    ReplyDelete
  3. 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.

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

    ReplyDelete
  5. 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.

    ReplyDelete
  6. 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.

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

    ReplyDelete
  8. The animation is not working in IE???

    Help....

    ReplyDelete
  9. really nice jquery animation effect! :)

    ReplyDelete
  10. would be helpful if include sql file

    ReplyDelete
  11. you have forgot

    var element = $(this);

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

    ReplyDelete
  13. 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.

    ReplyDelete
  14. Srinivas :

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

    Thanxs

    ReplyDelete
  15. 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
  16. @Gabriel

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

    Soon I will discuss on "jQuery Basics Series"

    ReplyDelete
  17. 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

    ReplyDelete
  18. 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!

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

    ReplyDelete
  20. Instead of mysql_real_escape_string(), please use intval()

    ReplyDelete
  21. Hi

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

    Thank you

    ReplyDelete
  22. Hi

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

    Please help

    ReplyDelete
  23. @sboniso

    Try this below tutorials new Version

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

    ReplyDelete
  24. Hello,

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

    Thanks

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

    ReplyDelete
  26. 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?

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

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

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

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

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

    ReplyDelete
  32. This tip is helpful, guy... Thanks, it works for me.

    ReplyDelete
  33. Excellent 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
  34. $prefix : why is this used???

    ReplyDelete

Make in India