Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

DWRequest: MooTools 1.2 Ajax Listener & Message Display

DZone's Guide to

DWRequest: MooTools 1.2 Ajax Listener & Message Display

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

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

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

Click here to view an example.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of David Walsh. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}