Animated AJAX Record Deletion Using jQuery

I’m a huge fan of WordPress’ method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here’s how to achieve that functionality with jQuery JavaScript.
View Demo
The PHP – Content & Header

The following snippet goes at the top of the page:

copyif(isset($_GET[‘delete’])) {
$result = mysql_query(‘DELETE FROM my_table WHERE item_id = ‘.(int)$_GET[‘delete’],$link);
}

The following is used to display the records:

copy$result = mysql_query(‘SELECT * FROM my_table ORDER BY title ASC’,$link);
while($row = mysql_fetch_assoc($result)) {
echo ‘

Delete
‘,$row[‘title’],’

‘;
}

The jQuery JavaScript

copy$(document).ready(function() {
$(‘a.delete’).click(function(e) {
e.preventDefault();
var parent = $(this).parent();
$.ajax({
type: ‘get’,
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();
});
}
});
});
});

For every link, we add a click event that triggers the AJAX request. During the request, we transition the containing element to a red background. When the AJAX request returns a “success” response, we slide the element off of the screen.
View Demo

How would you use this? Share!

Advertisements
By Rz Rasel Posted in jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s