Animated AJAX Record Deletion Using Dojo

By  on  

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

The PHP - Content & Header

The following snippet goes at the top of the page:

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=',$row['item_id'],'" class="delete">Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}

The Dojo Toolkit JavaScript

dojo.addOnLoad(function() {
	dojo.query('a.delete').connect('onclick',function(e) {
		var a = this;
		dojo.anim(a.parentNode,{
			backgroundColor: '#fb6c6c'
		},300);
		dojo.stopEvent(e);
		dojo.xhr('get',{
			content: {
				ajax: 1
			},
			url: dojo.attr(a,'href'),
			load: function() {
				dojo.anim(a.parentNode,{
					opacity: 0
				},300,null,function() {
					dojo.query(a.parentNode).orphan();
				});
			}
		});
	});
});

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.

How would you use this? Share!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

Discussion

  1. So, you’re learning Dojo now? I would like to see more! First comment (I think)!

  2. MP

    Hi man, great work as always!

    what does the $link variable does in the two sql-commands? I can’t get this or the Jquery-example too work, but if I remove the $link when I get the data from table I got result.

  3. @MP: The $link variable is the connection returned from the mysql_connect() function within PHP. It’s not a required argument.

  4. Ludovic

    Hi, This works very well, he’s the same script to add a record?

  5. Jason

    Nice. Do you have a jquery demo version?

  6. Jason

    nevermind. I found it.

  7. AnthonK

    But,how about to give an “alert-message” to warn some deleted records? Which part of code i should add? Thanks.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!