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.

if(isset($_GET['delete']))
{
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
	$result = mysql_query($query,$link);
}

The following is used to display the records:

$query = 'SELECT * FROM my_table ORDER BY title ASC';
$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result))
{
	echo '<div class="record" id="record-',$row['item_id'],'">
				<a href="?delete=%27,$row[%27item_id%27],%27" class="delete">Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}

The jQuery Javascript

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

Demo: http://davidwalsh.name/dw-content/jquery-record-delete.php
Source: http://davidwalsh.name/animated-ajax-jquery

Related Listings:

1. Jquery Animated Hover Animated Hover is a plugin for jQuery to create animated...
2. Autosave – Flexible Jquery Plugin Autosave is a flexible autosave plugin for jQuery. If yo...
3. Reddit-style Voting With PHP, MySQL And jQuery Let’s Get Started We need a table in the database...
4. Crafting an Animated Postcard With jQuery Nicely illustrated banners are…nice. But why not add a little...

Do you like this post?

Email: