Delete Records with Random Animation Effect using jQuery and Ajax.
Wall Script
Follow Me:
Tuesday, July 14, 2009

Delete Records with Random Animation Effect using jQuery and Ajax.

Some days back I had posted "Delete a Record with animation fade-out effect using jQuery and Ajax". In this post I want to explain delete records with random animation(slideup and fadeout) effect using jQuery framework. Very simple code just 10 lines. Take a look at live demo.

Delete Records with Random Animation Effect using jQuery and Ajax.

Download Script     Live Demo

Database Table Code
A simple database table two columns msg_id and message.
CREATE TABLE updates(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);



delete_random.php
Contains PHP code displaying records from database. Take a look at class="delete_button"
<ol class="update">
<?php
include("dbconfig.php");
$sql="select * from updates order by msg_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
$msg_id=$row["msg_id"]; 
?>
<li>
<?php echo $message; ?>
<a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>
</li>
<?php
}
?>
</ol>

jQuery code
Contains javascipt code. $(".delete_button").click(function(){}- delete_button is the class name of anchor tag (X). Using element.attr("id") calling delete button value. If id value is even number if(id(even) % 2) = If(0) false
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,

success: function()
{
if(id % 2)
{
parent.fadeOut('slow', function() {$(this).remove();});
}
else
{
parent.slideUp('slow', function() {$(this).remove();});
}
}
});

return false;
});
});
</script>

deleteajax.php
Contains PHP code. Delete record from the database.
<?php
include("dbconfig.php");
if($_POST['id'])
{
$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>

CSS Code
*{margin:0;padding:0;}
ol.update
{
list-style:none;font-size:1.2em;
}
ol.update li
{
height:50px; border-bottom:#dedede dashed 1px;
}
ol.update li:first-child
{
border-top:#dedede dashed 1px; height:50px;
}
#main
{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{
margin-left:10px;
font-weight:bold;
float:right;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


37 comments:

  1. Great thank for ur support!

    ReplyDelete
  2. on "deleteajax.php" the variable "$id" id equal to "id=2" for instance. I think it will trigger a sintax error. Am I right?

    ReplyDelete
  3. @Eduardo de Matos

    No.........

    Eg : $id = 1 -> 1 % 2 = 1 ---> if(1) means true...

    Eg : $id = 2 -> 2 % 2 = 0 ---> if(0) means false..

    Eg : $id = 3 -> 3 % 2 = 1 ---> if(1) means true.....
    .
    .
    .
    .

    ReplyDelete
  4. @Srinivas
    I mean the variable "$id" on the SQL query

    ReplyDelete
  5. Doesn't seem random to me.... I can predict exactly which animation will play!

    ReplyDelete
  6. Hello Srinivas.

    Nice article!

    I was just trying to download this but it seems the downloaded index file and the code you have given here is pretty different.

    Neither i find delete_random.php file nor the jquery code you have given here.

    Do you think is this the same zip file or code for this article? Or can you give me the link where i can find the zip file for this module?

    Regards!

    ReplyDelete
  7. Hello again!

    I am sorry. i should have checked it properly into my index page.:( everything is there.

    And yeah its working.

    great script!

    ReplyDelete
  8. Well it's a good script, but can i recover a deleted record ?
    In my opinion the script need an alert, to verify the action...

    ReplyDelete
  9. @Manuel

    if(confirm("Sure you want to delete this update? There is NO undo!"))
    {

    $.ajax
    ({.......................... });

    }

    More information

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

    ReplyDelete
  10. Mysql row won't delete. Very strange installed the tables right. Included config file but the deletion won't work. The database ids are exactly the same as in the url. How to fix this?

    ReplyDelete
  11. mySQL could not delete the attribute..why?

    ReplyDelete
  12. why deletion doesn't work?

    ReplyDelete
  13. Live Demo in free PHP hosting : No database connetion.

    ReplyDelete
  14. nice, from tunisia ;)

    ReplyDelete
  15. For some reason this example does not reach the deleteajax.php file for me. I have inserted logging to debug the issue, but the logging I placed outside of the call works while the logging within the call to the deleteajax is never written.

    ReplyDelete
  16. Hi there...
    Ur code help me al ot..
    but i've 1 prob...
    i use paginaton for this delete code...
    Let say if in 1 page there is 10 records, when I delete 1 record, the page display 9 records.
    What should I add in the code to make the list refresh and list 10 records.

    ReplyDelete
  17. great work here my friend..........

    ur tutorials seems easy to learn and is making me a jquery fan...........

    thank you for this wonderful work.........

    ReplyDelete
  18. awesome stuff, how would you code this so it only displays 5 rows and as you delete a row it will autofill if there are more than 5 rows?

    ReplyDelete
  19. Thank you very much, this is working great!

    ReplyDelete
  20. I subscribe to some of the problems already mentioned. But the main comment i have to make is that if these ARE tutorials (as asserted) then there is an amazing lack of comment & explanation!!!!

    ReplyDelete
  21. It's really nice...

    ReplyDelete
  22. I just, mix Pagination and Delete Records together but it not working any idea how to do this

    ReplyDelete
  23. In order to use pagination and delete records, once the data has been deleted you must refresh page so it shows the LIMIT again, lets say 10.
    simple javascript will do.


    history.go(0)

    Srinivas done great job explainning this tutorial, hope you all get it.

    ReplyDelete
  24. There are lots of ajax[delete] code exist on web, but doesn't work properly. Thanks for this helpful article. Really Nice.

    Best Regards From TURKEY.

    ReplyDelete
  25. Boy... kudos to you! you posts are very useful!!

    ReplyDelete
  26. Hi,
    script works, it reaches the AJAX script and deletes the item. BUT the item is still present in the list until I refresh the site...

    ReplyDelete
  27. How would you pass more variables than user_id to the delete.php page?

    ReplyDelete
  28. @Above Comment:

    You can use below code to pass more variables

    var dataString = 'id='+ id + '&name=' + name + '&add=' +add; // So on...

    ReplyDelete
  29. Awesome tutorial. I've successfully added it to my project.

    Thanks!

    Tim

    ReplyDelete
  30. nice ! i have more simple code for delete data with AJAX and JQuery .. :) I hope you see..
    http://simplycdesign.blogspot.com/2011/06/delete-data-dengan-ajax-dan-jquery.html

    ReplyDelete
  31. how to used two var

    ReplyDelete
  32. I have code
    [tr][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]< a c lass = "delete_button" i d="id; ?>" href="#">[/td][/tr]

    How is remode < tr >

    (sorry, I now little english )

    ReplyDelete
  33. its urgent please I did every thing ok but my delete_random.php doesn't pass me to deleteajax.php.
    whats going wrong?

    ReplyDelete
  34. para poder excluir no mysql é simples só add no deleteajax.php

    include("config.php");

    e no where ms_id='$id' esta faltando g no msg_id='$id'

    ReplyDelete
  35. It was delete in my demo.but when i refresh page again comes back .same thing with UR demo page.how to delete permanent

    ReplyDelete
  36. Very Nice Tutorial Man...it really helped and more importantly in a simpler and understandable way...but as a learner i needed to ask a question that :

    Can we become a developer like you by learning things from websites like yours??In short i need to ask whether one should learn development in the way i am doing write now.i.e.learning or copying after understanding the code from the internet as and when needed.??Am i going right??

    ReplyDelete

Make in India