Ajaxian Featured Tutorial: Simple Save Message Using MooTools
Date : 2008 03 04 Category : Tech & Development
AjaxianIt's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.
Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.
In the image below, Antonio has described the sequence of effects:
To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.
Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.
PLAIN TEXT JAVASCRIPT:<script type="text/javascript">
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');
/* AJAX Request here... */
fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity' : 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0100, this, {'opacity' : 1});
});
});
});
</script>
Antonio has created a demo to show off the results.