Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

DWRequest: MooTools 1.2 AJAX Listener & Message Display

By David Walsh on March 5, 2008

Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible.

Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a Gmail-like AJAX display to your website using the Prototype JavaScript library. The article got me to thinking: could it be helpful to always display an AJAX notification message upon every request's initial request, success event, and failure event? Maybe even only for debugging purposes?

Whatever your reason may be, I've created the DWRequest MooTools class to inform the user or developer of each AJAX request and subsequent result.

View Demo

The CSS Code

#message	{ display:none; width:150px; text-align:center; padding:5px 8px; font-weight:bold; position:absolute; right:2%; font:12px arial; }

The XHTML Code

The following code is an example of two XHTML links that make AJAX calls. Note the message DIV.

<body>

	<div id="message">Performing Request...</div>
	<a href="inputs.php" class="ajax">Succeed</a><br />
	<a href="sug.php" class="ajax">Fail</a>

</body>

The MooTools JavaScript Code

var DWRequest = new Class({
	Extends: Request,
	options: {
		onRequest: function() {
			show_ajax_message('request');
		},
		onSuccess: function() {
			show_ajax_message('success');
		},
		onFailure: function() {
			show_ajax_message('failure');
		},
		onCancel: function() {
			show_ajax_message('cancel');
		}
	}
});

//adds initial events
window.addEvent('domready',function() {

	//for every action class
	$$('.ajax').each(function(el) {

		//add an event..
		el.addEvent('click', function(e) {
			e = new Event(e).stop();

			//make ajax request
			var req = new DWRequest({
				url: el.get('href'),
				method: 'get',
				data: 'something'
			}).send();
		});
	});
});

//shows the block
function show_ajax_message(state)
{
	//set position
	$('message').setStyle('top',window.getScrollTop() + 10);

	//on request...
	if(state == 'request')
	{
		//show the box
		$('message').addClass('onrequest').setText('Performing Request...').setStyles({'background-color':'#fffea1','display':'block','opacity':'100'});
	}
	//on success
	else if(state == 'success')
	{
		//take care of box
		$('message').set('text','Request Complete!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#90ee90'});
	}
	else if(state == 'failure')
	{
		//take care of box
		$('message').set('text','Request Failed!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#ff0000'});
	}
	else if(state == 'cancel')
	{
		//take care of box
		$('message').set('text','Request Cancelled!');

		//do effect
		var myMorph = new Fx.Morph('message',{'duration':1000});
		myMorph.start({'opacity': 0,'background-color': '#fffea1'});
	}
}

The Explanation

Once the DOM is ready, any link with the class ajax is listened to -- upon click, a DWRequest class instance is created.
I've extended the MooTools Request class, adding default actions for the onRequest, onFailure, onCancel, and onComplete events. (Calls the show_ajax_message() function.)
The function displays and manipulates the message DIV as needed: color morphing, message changes, and positioning.

View Demo

Do you have any suggestions for my class? Please share!

Recent Features

By Landon SchroppApril 14, 2014
Write Better JavaScript with Promises
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
By Eduardo BouçasJanuary 5, 2015
Write Simple, Elegant and Maintainable Media Queries with Sass
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

By David WalshDecember 28, 2009
Create a Simple Slideshow Using MooTools, Part II: Controls and Events
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by: Adding "Next" and "Previous" controls. Adding...
By David WalshApril 29, 2008
MooTools onLoad SmoothScrolling
SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

Discussion

Bouchard, Keven
Great little script!

The only thing I’d add is more information about the faillure message. Like wich type is it. Because that’s meaningfull if it’s used for debugging.

Also it can be “extended” by shooting the php error message in the postback nad showing it in the message box, like… this value is missing or inexistant, etc. depending on which type of request you’ve fired, but that’s getting a bit out of the js part ;).

gj!
david
Thank you for your ideas Keven!

In terms of versioning, I guess I’d consider this a “0.1”. I hope to continue working on this class, adding user-friendly icons and providing more information about the Ajax request itself (displaying url, execution time, …)
nir tayeb
Use switch statement instead of the if, it is more appropriate here and the performance is better.

Why you have called it *DW*Request? what is the meaning?
david
Right nir, I’ll incorporate a switch next time. The “DW” is simply my attempt at tracking usage (my initials).
Andreas
Wouldn’t it be more mootoolesk to add the function show_ajax_message to the class, cause there is no other one that will use it.
david
@Andreas: Absolutely. After I published the article, I kicked myself for not doing that. I’ll do that in the next version.

@All: Any more suggestions?
Fabrice Terrasson
Tried to extend Request.HTML without success. Any clue ?
acctman
do you have any examples or tips for using this to display a notification to a user? Pretty much what I want to do is if the user is on the site, and i need to send out a notification to all users, how would i call the Request… ? is there anyway to do this, what method would work without having the user to reload a page to see the message. I.e. in a chat room
epsi
Cheers David,

http://paste.davidwalsh.name/78

I’m using your code in my Ajax-based-Joomla.
Actually, it’s highly modified as I’ve made a simple generic class.

Hope you don’t mind to take look in your pastebin area.

Thank You. Thank You. Thank You.
note: pastebin looks great… I’ve never known you have it.