How to implement a simple chain effect in MooTools to implement sequential events.
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.
He want a sequence of events like this:
1. Submit a form
2. Display a message box with the message "Saving..."
3. When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.
2. Display a message box with the message "Saving..."
3. When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.
How I said, you can image this list of "actions" like a "sequence" of effects. A simple way to implement a chain of effects like this is using mootools and this tutorial explains how to implement it with some lines of JavaScript code.
Live Preview 
Download this tutorial (include mootools)Step 1: HTML Code
HTML code is very simple. I added only the essential elements, the message box (with ID "box") and an input element with a button (with ID "save_button"), but you can customze it with a more complex structure:
<div id="box"></div>
<input name="myinput" type="text" /> <input id="save_button" name="save_button" type="button" value="save"/>
<input name="myinput" type="text" /> <input id="save_button" name="save_button" type="button" value="save"/>
Step 2: CSS Code
You can coose a style for your message box changing how you want these attributes:
#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}
Remember to set the initial display attribute to "none". In this way the message box will appear only when an user submit the form:
Step 3: Javascript Code
Copy this code in the <head> tag of the page:
<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>
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>
f you never used Mootools, but you are familiar with JavaScript, this line of code:
var box = $('box');
... let me say "it's equal" to:
var box = document.getElementById('box');
This line of code enable a delay of 1000 ms (1 second) before to apply fade-out effect:
this.start.delay(1000, this, {'opacity' : 0});
It's all!
Download this tutorial (include mootools)Related Content
CSS Message Box collection
I am 
You could also make it so that the text slides down upon the notification, so that the display isn't so "sudden."
Good work Antonio. I've made your posting today's Ajaxian Featured Tutorial (http://ajaxian.com/archives/ajaxian-featured-tutorial-simple-save-message-using-mootools)
Hey man? You are simply the best!
download link dont work but GOOD JOB!
@anonymous: mmm... I tryied but download link works!
thanks, very useful! Would like to see Anonymous' text slide-down technique.
nice....
Hi. Could you have a fuller tutorial -- e.g., some simple thing on the backend gets done when we click the "Save" button in the demo, and THEN the ajax message appears?
It is nice to have all these bits of code from different places, but its the integration of all of it into something meaningful that is tricky.
Thanks!
its pretty good
Antonio another incredible tutorial!!!
Mate, i would like to add this to my admin panel in my website.
How i can add his to my php cms? when i write a new post in the save button?
Thanks
http://www.orangemedialabs.com
Felipe Millan Assler
The effect is nice, I was wondering if you could update it for mootools v 1.2?
Its dying on var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut}); as far as I can tell,
but moving that directly into your call to fx.start makes it valid, but the effect doesn't work correctly.
does anyone know if this is similar to the save and delete functions that appear in gmail? It seems to me like this is a nice way to get around intrusive pop ups.
nice tutorial...
I am searching for couple of hours...
Thank you
Scholarships solutions
Antonio, can u please include a working example link..
Hi,
how if I want to perform something during onclick link to a php file then return the result in the above message box using the same code ?
Is it possible to let the box appear without clicking anything?