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
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Ana Tudor&#8217;s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    Checkbox Filtering Using MooTools ElementFilter

    When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application.

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!