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
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

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!