9lessons programming blog
Loading Search
9lessons Bring Friends
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;
}
Comments
{ 37 comments }
Anonymous said...

Great thank for ur support!

Eduardo de Matos said...

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

Srinivas Tamada said...

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

Eduardo de Matos said...

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

Anonymous said...

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

Deepali said...

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!

Deepali said...

Hello again!

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

And yeah its working.

great script!

Manuel said...

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

Srinivas Tamada said...

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

Anonymous said...

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?

Lai said...

mySQL could not delete the attribute..why?

Anonymous said...

why deletion doesn't work?

Srinivas Tamada said...

Live Demo in free PHP hosting : No database connetion.

Anonymous said...

nice, from tunisia ;)

Anonymous said...

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.

Nazatul Shida said...

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.

Anonymous said...

great work here my friend..........

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

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

Anonymous said...

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?

Anonymous said...

Thank you very much, this is working great!

ddaann said...

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!!!!

Anonymous said...

It's really nice...

Arun said...

working great!

Raza Rahil said...

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

Eddyf said...

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.

Mustafa said...

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.

Revathy said...

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

Anonymous said...

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

Anonymous said...

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

Ravi Tamada said...

@Above Comment:

You can use below code to pass more variables

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

Tim said...

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

Thanks!

Tim

Nizar Hidayat said...

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

Anonymous said...

how to used two var

Mustafa said...

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 )

Anonymous said...

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

Douglas Mendes said...

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'

ican said...

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

Ankur Lakhani said...

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??

Post a Comment