Animated Ajax Record Deletion Using jQuery

I’ve never played with WordPress much, so I’ve never this; very nice, I like. I’m going to implement this into my control panel for comment management. I’ll add a little functionality in that there will be two links, one to approve, and one to reject, and the approval action will turn the comment green as it slides off the screen.

Also, have been reading your site mostly in my RSS reader recently. Hadn’t seen the new Facebook-esque theme you have, nice look.

I dont know jQuery, but could you apply the click event to the a.delete collection instead of iterating it with each() ?

As EmEhRKay pointed out, u dont need to do the .each() thing.

$(‘a.delete’).click() will bind a click event to the returned collection of your selector.

on the php part i recomend this line:

$query = ‘DELETE FROM my_table WHERE item_id = ‘.intval($_GET['delete']);

A little error on php line 3 there’s no “int” functionon php… i recomend

$query = ‘DELETE FROM my_table WHERE item_id = ‘.intval($_GET['delete']); //to obtain the integer value of delete and also prevent SQL Injection

Hey David
I like your take on this. Is it possible to write this so that (just like wordpress), when you delete a record, it stays deleted. I noticed the recors re-appears when the page refreshes. (Understanding that you cant allow for actual record deletion on the demo)

Thx
Anthony
465media

Delete links are horrible. I suggest people dont actually put them in their apps.

http://stephenwalther.com/blog/archive/2009/01/21/asp.net-mvc-tip-46-ndash-donrsquot-use-delete-links-because.aspx

Its not just that it needs to be behind a password protected area, there needs to be something else than a simple click for to you delete/modify data from the database.

Say you were already passed the protected area and you had your cookies all set. You get an email and you open it. It contains this.

<img src=”http://davidwalsh.name/dw-content/jquery-record-delete.php?delete=3” />

Since you are already logged, it will verify your cookies and go ahead and complete this request. Your record just got deleted.

vBulletin doesnt have this issue. vBulletin forces “An are you sure?” type page. I dont think there is a way to do this and keep this special effect.

But for this to work, the attacker will need to know how to create the delete link. This is the only thing I think will stop the attack in custom apps but I don’t think its good safegaurd.

I’m by no means knocking on this tutorial or anything, I think it’s great. I was just making sure people knew the CSRF attack that can come from it.

While I understand Jesus’ concerns, hopefully the programmer would at the least employ the double cookie check method described here

where, along with the request vars, you send a token and the session id to verify the request

Nice effect. I really like the way wp does this also. Do you have a way to accomplish the same effect with prototype.js? This would go really nicely in my current project, but I’m using prototype and I’m too deep into the project to switch to jQuery at this point.

Thanks

Nice Effect….

What if we want to add a modal confirmation with jQuery UI Dialog?
I tried but with no sucess.

Any tips?

Thanks for the nice script.

Looks great. If I would suggest one minor tweak to suit me personally, it would fade to red, then fade to invisible (i.e. disappear), and then the rows would slide up to fill up the space. I think this would look even cooler. Of course I’m sure when I learn jQuery I’ll be able to tweak it to do that myself. ;)

Implementing the jQuery UI Modal box would be a great enhancement to this script.

It would add a layer of security as discussed above and make the application more user friendly.

Very Nice (:

Just finished implementing it. Works perfectly, thanks!

Is there a way to do this using a POST instead of a GET?

Very Useful, thanks!!!

If you do it as a POST, could you have it take form input fields name/values to pass to the php by telling jquery the form name or form id and it would pass what ever is in the form, instead of listing all the variables name and values in the jquery?

Some Effect but different http://9lessons.blogspot.com/2009/01/delete-record-using-ajax-get-method-and.html

The script is good but the effect works does not work the same manner on tag.
As some body try it on a tag ?

Ooo…Ive been trying to get this to work for ages, finally Ive worked this out. I didn’t realise I had to define id=”record-” within a div an a tag. Hehe.

Thanks for this.

very nice effect.. is that possible to implement in check box?

Awsome effect. I noticed you are doing this with the parent element being a div tag. Could you do this with a table row?

<tr>
<td>title</td>
<td><a>delete</a></td>
</tr>

This is cool so thanks for sharing.
I have a few suggestions to make it more complete and usable;
1) confirm the delete
2) allow multiple selections to be deleted

To get this working on tables, just add

var parent = $(this).parent("td").parent("tr");

instead of

var parent = $(this).parent();

Don’t forget to add the id to tr.

Does anyone can make this working with jQuery UI Dialog modal confirmation or any simple confirmation?

I tried to add a simple onclick confirm return true or false, but it always returns true.

nice, I will try

BenN,

(int) is not a function, it is called typecasting, and is perfectly valid in php.

Hello guys!
this implementation is fantastic (sorry for my bad english)

I qote Rob

1) confirm the delete
2) allow multiple selections to be deleted

can this be used to remove entire tr ?

*lionel
Yes, AFRC says

AFRC says:

To get this working on tables, just add

var parent = $(this).parent(“td”).parent(“tr”);

instead of

var parent = $(this).parent();

Don’t forget to add the id to tr.

Does anyone can make this working with jQuery UI Dialog modal confirmation or any simple confirmation?

I tried to add a simple onclick confirm return true or false, but it always returns true.

A few people mentioned were looking for a modal popup solution to round out the demo so here are the changes required to implement it with the addition of the JQuery UI.

Where you display the records add:

echo ‘<div id=”deletelink” title=”Confirm File Deletion”>Are you sure you want to permanently delete this record?</div>’;

Then you will need to modify the jquery JS file the new fille will look something like follows:

$(function() {

var parent = ”;

$(‘a.delete’).click(function(e) {
e.preventDefault();
parent = $(this).parent();

$(‘#deletelink’).dialog(‘open’);
return false;
});

$(‘#deletelink’).dialog({
autoOpen: false,
width: 300,
buttons: {
“Ok”: function() {
$.ajax({
type: ‘post’,
url: ‘jquery-record-delete.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),
beforeSend: function() {
parent.animate({‘backgroundColor’:'#fb6c6c’},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});

}
});
$(this).dialog(“close”);
},
“Cancel”: function() {
$(this).dialog(“close”);
}
}
});

});

The key here is declaring your parent var holder at the top level and then moving the ajax call to the dialog.

Enjoy!

This is great! Works like a champ. How would I be able to achieve the same effect, except when I add a new record?

hey im an absolute beginner, somehow the above example didnt work for me. but i googled and made mine working with the following example:

Link >> http://www.phpsimple.net/mysql_delete_record.html

now how do you do it with ajax request using jquery.

thanks a lot guys!!!

Thanks for this cool example incl. dialog confirm :)

Thanks for the fantastic deletion script!

How would one go about doing the opposite of this and have a text field to ADD records to the db and animate the insertion of the new item in the list at the appropriate spot (either alphabetically or numerically)?

…with jQuery…I forgot to mention :)

I just cant get this to work, i followed the instructions on how to get it to work with a table but it goes 2 ways: 1. Deletes the record without animation. 2. Shows a weird animation (seems like the parent td’s get removed, and then it slides up) but this doesnt delete it from the database.

I got the a.delete class right, but where to put the id mentioned earlier, and what do i use for a name for that id.

Thanks in advance..

Well, i saw the light hehe and got it to work, it animates and deletes the record from the db. The only thing it still doesnt do correctly is show the fade to red and slide up nicely (in a table). It still seems like the parent td gets removed so the text and delete button moves to the left and then slides up. Anyway to fix this ?

@Maik:
Are you importing the jQuery plugin ‘Color‘?
This was my issue for a bit.

No, i did not actually, thanks this works fine now !

Me again ^^

I’m trying to implement the confirmation box, but i cant get it to work.

I keep getting the error: $(“#deletelink”).dialog is not a function

Plz help me out !

note to self
Implement Jquery UI library before complaining :P

sql injection, please don’t post tutorials that contain massive security flaws like that

Hi David!
Is it also possible to use this outside wordpress?
I’ve tried using this on a project i’m working on but it drives me crazy that it won’t work..
I never worked with AJAX though, but i guess it’s not that difficult as PHP?

Thnx in advance!

@David: Okay, but why is it that nothing happens? I really copied the exact source code into a DIV element of mine.. But the frikkin page doesn’t do crap..

Dear David, thank you for your script! I’ve installed it and this effect works, but is not working php script that deletes comments. It all the time deletes the last comment, regardless of the click to remove. Maybe it is because I use the files, not the database? Help me please. Thank you. (Sorry my bad English)

Never mind, I have done this problem. But now I have another problem: when I delete a comment, I change the following comments in less than 1 room, and id div remains the same and when I remove coment, it removes the following comment. Give me please how to change id div following comments?

Thanks, I have done and this problem. Thanks you for your amazing script!

BMiller (or anyone with an answer), What do you mean by:
var parent = ”;
that’s not working… I am assuming you wanting to say var parent = ‘(something in here)’; ? either way, please clarify.. I am using tables and managed to get to the parent tr by doing$(this)parent().parent()but in trying to use the modal box it all breaks, animation and everything works as intended except for the db deletion.yes I made sure everything works without the modal box. I am pretty sure (tell me otherwise if it’s otherwise!) it’s the parent var holder that I am having issues with… how do I define this exactly?your help is much appreciated thank you!

can we do it using xml files not database? how? anyhelp:D thanks

i did it but the fade thing is not working:S
its deleting and get me on the top of the page without the animation

print(“<script type=”text/javascript”>
$(document).ready(function() {
$(‘a.delete’).click(function(e) {
e.preventDefault();
var parent = $(this).parent();
$.ajax({
type: ‘get’,
url: ‘clientdel.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),
beforeSend: function() {
parent.animate({‘backgroundColor’:'#fb6c6c’},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
</script>”);
print(“<?php
if(isset($_GET['delete']))

{
$xmlFile = new DOMDocument();
$xmlFile->load(“clients.xml”);
$xml_client = $xmlFile->getElementsByTagName(“news”);

for($i=0; $i<$xml_client->length; $i++)
{
if($xml_client->item($i)->getAttribute(“title”)==$_GET['delete'])
{
$xml_delclient=$xml_client->item($i);
$xml_delclient->parentNode->removeChild($xml_delclient);
$xmlFile->save(“clients1.xml”);
}
}

}
?>
“);

print(“<?php

$i=0;
$xmlFile = new DOMDocument();
$xmlFile->load(“clients1.xml”);
$xml_typecli = $xmlFile->getElementsByTagName(“type”);
//$xml_client = $xmlFile->getElementsByTagName(“news”);

foreach($xml_typecli as $type)
{
?>

<div id="client_getAttribute(“name”)); ?>” class=”record”>getAttribute(“name”)); ?>

item($i);
$client=$news->childNodes;//echo($album->childNodes->length);
foreach($client as $child)
{
if($child->nodeType==XML_ELEMENT_NODE)
{
$a=$child->attributes->item(0)->value;
$b=$child->attributes->item(1)->value;
$c=$child->attributes->item(2)->value;

echo ‘<div class=”record” id=”record-’,$a,’”>
<a href=”?delete=’.$a.’” class=”delete”>Delete</a>
<strong>’,$a,’</strong>
</div>’;

}

}echo (“<br>”);echo (“<br>”);
$i++;

}

?>”);

Hi,

I have just started to learn jQuery. And for my admin panel i did implemented this cool effect. 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.

Can i use this functionality inside an iframe?

I need to show some data in a scrollable iframe and remove each row (which has an delete image) by clicking the delete image.

Is this possible?

hey, i have tried your trick tips.

Unfotunately when i click the ‘delete’ button it just candy my eyes that the row is deleted but not in the database.

I just follow your code just clear. Could you give me some idea?

Very nice article. Not getting the color animation to work confused me for a while until I found the color plugin :)

As a few people have mentioned security. Type casting is good practice but I’ve always understood that you should use it along with a claned inout – not relying solely on the typecast. E.g. you could have easily changed the query to:

$id = .(int)$_GET['delete'];

$query = sprintf( “DELETE FROM my_table WHERE item_id = ‘%s’”, mysql_real_escape_string($id) );

This is very cool, however, I am having the same difficulty that Maik Diepenbroek is having. My results are displayed in a table, so the animation/delete is working, however, the effect is very jagged causing the data to kind of shift to the left and it is not as smooth as the effect you have featured here. Any ideas as to what may be causing this? Here is my sample code:

print(” while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$bg = ($bg==’#eeeeee’ ? ‘#ffffff’ : ‘#eeeeee’);

echo ‘<tr bgcolor=”‘.$bg.’” class=”record” id=”record-’.$row['user_id'].’”>
<td align=”left”>’.$row['username'].’</td>
<td align=”left”>’.$row['first_name'].’</td>
<td align=”left”>’.$row['last_name'].’</td>
<td align=”left”>’.$row['rd'].’</td>
<td align=”left”><a href=”edit_user.php?id=’.$row['user_id'].’”>Edit</a></td>
<td align=”left”><a href=”view_users.php?delete=’.$row['user_id'].’” class=”delete”>Delete</a></td>
</tr>’;
}
echo ‘</table>’;”);

This is very cool, however, I am having the same difficulty that Maik Diepenbroek is having. My results are displayed in a table, so the animation/delete is working, however, the effect is very jagged causing the data to kind of shift to the left and it is not as smooth as the effect you have featured here. Any ideas as to what may be causing this? Here is my sample code:

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$bg = ($bg==’#eeeeee’ ? ‘#ffffff’ : ‘#eeeeee’);

echo ‘<tr bgcolor=”‘.$bg.’” class=”record” id=”record-’.$row['user_id'].’”>
<td align=”left”>’.$row['username'].’</td>
<td align=”left”>’.$row['first_name'].’</td>
<td align=”left”>’.$row['last_name'].’</td>
<td align=”left”>’.$row['rd'].’</td>
<td align=”left”><a href=”edit_user.php?id=’.$row['user_id'].’”>Edit</a></td>
<td align=”left”><a href=”view_users.php?delete=’.$row['user_id'].’” class=”delete”>Delete</a></td>
</tr>’;
}
echo ‘</table>’;

I realise it is a demo… but should it not be a post request to delete things rather than a get? You know… to promote good practices.

Oh ya… someone duplicated the content… http://www.ajaxupdates.com/animated-ajax-delete-jquery/

Hi , First time user of AJAX/Jquery. I don’t know what I am doing wrong. Though I need a confirmation with a UI dialog , I will first try to get it work without. I am using td,tr in my file manage_documents2.php

Right now I have the following

$(document).ready(function() {
$(‘a.delete’).click(function(e) {
e.preventDefault();
var parent = $(this).parent(“td”).parent(“tr”);
$.ajax({
type: ‘get’,
url: ‘manage_documents2.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),
beforeSend: function() {
parent.animate({‘backgroundColor’:'#fb6c6c’},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});

.delete { color:#f00; display:block}

And the php/html looks like

<tr id='record-’>.<a href="?delete=” class=”delete”>
And finally the delete query

I am not making much use of the css ‘delete’ but even thats secondary. I keep clicking on delete icon but nothing happens , jsut get a “error on page”

Sorry for the long post.

Any idea what I am doing wrong. The function looks like this
$(document).ready(function() {
$(“a.delete”).click(function(e) {
e.preventDefault();
var parent = $(this).parent(“td”).parent(“tr”);
$.ajax({
type: ‘get’,
url: ‘manage_documents2.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),
beforeSend: function() {
parent.animate({‘backgroundColor’:'#fb6c6c’},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});

and the PHP/HTML like this
<tr id='record-’>.<a href="?delete=” class=”delete”>

However nothing happens when I click on my delete icon

Hi,
u did great job but still there is something remains. i think u need to put a confirmation message for delete.

@Mike: Can you move a table row up? Nope, so don’t simply fade it away!

So
parent.slideUp(300,function() {

Becomes
parent.fadeOut(’slow’, function() {

There are other effects but this is seemingly the most practical for this application.

Hi Walsh,

I used this for my project.
Its cool man !
Thanks for your post
Regards
Sushant Danekar

@Kyle:

Hi Kyle, I am having the same problem.. am able to get it working but struck with removing newly added records.

Have you found any solution? Really appreciate if you can drop a note.

I also checked the David’s note below but it is mootools I need to totally move it.

@Kyle:

Thanks for the post.

The script doesn’t work on Google Chrome. Also, the script doesn’t work as expected when you have nested DIVs or SPANs inside the record DIV.

Hey Guys I have tried to implement this into a projetc im working on. I simply want to delete records from a database. The only change I have is to change $_GET to $_POST.

I am recieving $link as an undefined variable. I cant see anywhere in the tut of where it is declared.

Does the value of the record in the database need to be an integer?

The other two errors I am recieving are very similiar. They are:

mysql_query() expects parameter 2 to be resource, null given in C: (line 32)
AND
mysql_fetch_assoc() expects parameter 1 to be resource, null given in C: (line 33)

these lines in the tut are:

$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result))

hope someone can help. thanks.

Reece Cropley

@Martijn:

The OP has clearly explained that the example doesn’t actually delete records – that not the point of this tutorial (you’ll need a sql tutorial if you want to actually delete a record).

Also, how could anyone possibily help you without any source code? It amazes me that people still post such vagues requests.

@Reece Cropley: If you’re deleting a single record why are you using a loop? I think you need to go and read a beginners tutorial on php with mysql – w3schools.com have a few good ones – the examples will make a lotmore sense then).

FYI you’code would be along the lines of:

$delete_sql = “DELETE FROM users WHERE userid=$id”;
$res = mysql_query($delete_sql);

EDIT: ah see what you mean with the link variable. As this is a web dev related site the Op has assumed you know the very basics of connecting to a MySQL database – which is what the link var is being used to do.

You REALLY need to go an read some basic tutorials ;)

Awesome demo. I am trying to use this on a table and I have the animation working. The problem I am seeing is that the row shifts right as it is being animated so the table width shifts back and forth when a row is deleted. Here is a sample of what I have done.

/* all media */
@media all
{
/* global */
* { margin:0; padding:0; } html { overflow-y:scroll; }
body { background:#eceff5; font-family:’lucida grande’,tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#333; } * html body { position:relative; }
}

$(document).ready(function() {
$(‘a.delete’).click(function(e) {
e.preventDefault();
//var parent = $(this).parent();
var parent = $(this).parent(“td”).parent(“tr”);
$.ajax({
type: ‘get’,
url: ‘jquery-record-delete.php’,
data: ‘ajax=1&delete=’ + parent.attr(‘id’).replace(‘record-’,”),
beforeSend: function() {
parent.animate({‘backgroundColor’:'#fb6c6c’},300);
},
error: function() {
// This is a test page and I don’t have the php setup so the error function will be called.
parent.slideUp(300,function() {
parent.remove();
});
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});

Delete
Database Item 1

Delete
Database Item 2

Delete
Database Item 3

Delete
Database Item 4

Delete
Database Item 5

Delete
Database Item 6