Tuesday, March 4th, 2008

Ajaxian Featured Tutorial: Simple Save Message Using MooTools

Category: MooTools, Tutorial

It’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.

javascript

  1. <script type="text/javascript">
  2. window.addEvent('domready', function(){
  3. var box = $('box');
  4. var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
  5.  
  6. $('save_button').addEvent('click', function() {
  7. box.style.display="block";
  8. box.setHTML('Save in progress...');
  9.  
  10. /* AJAX Request here... */
  11.  
  12. fx.start({
  13. }).chain(function() {
  14. box.setHTML('Saved!');
  15. this.start.delay(1000, this, {'opacity' : 0});
  16. }).chain(function() {
  17. box.style.display="none";
  18. this.start.delay(0100, this, {'opacity' : 1});
  19. });
  20. });
  21. });
  22. </script>

Antonio has created a demo to show off the results.

Posted by Rey Bango at 8:54 am
6 Comments

++---
2.5 rating from 48 votes

6 Comments »

Comments feed TrackBack URI

So is that ‘0100’ supposed to be the octal 64, or is it supposed to be 100?

Comment by henrah — March 4, 2008

Nice little tutorial Antonio.

Oh, and… jQuery syntax > MooTools :)

Comment by roosteronacid — March 4, 2008

I think based on the row above, that 0100 is actually supposed to be 1000, or one second.

Comment by starkraving — March 4, 2008

>> Oh, and… jQuery syntax > MooTools :)

I would have to disagree here. The problem is, the code sample above is an awful mix of standard Javascript and the older framework.

It makes much more sense to do something simple like:

form.addEvent(‘submit’, doAnimation.bindWithEvent(form));

function doAnimation(event) {
event.preventDefault(); // stops form submittal
box.set(‘html’, ‘Saving…’).slide(‘show’);
this.send({
onComplete: function() {
box.setHTML(‘Saved!’).slide.delay(1000, box, ‘hide’);
}
});
}

May not be exact, but the gist is there. Some one can correct me on the syntax being incorrect or not, but it should be MooTools 1.2 syntax.

Comment by Liquidrums — March 4, 2008

I want to adopt this code for my website, but how do I make the text “Saved!” fade away slower (say duration of 4 seconds) while keeping the sliding effect at 1 second duration and while also using the chaining syntax? I tried just changing the delay value but it doesn’t work because it will only make the text start fading after a longer delay, and doesn’t affect the rate at which it fades.

Comment by Jordan — March 5, 2008

Just for fun, I did the same thing with dojo on my blog…

Comment by rbinse — March 5, 2008

Leave a comment

You must be logged in to post a comment.