Nice Ajax effect for Message Box using Dojo or Mootools

Tagged:  

Both Mootools and Dojo are great libraries for JavaScript effects. I found two posts that are about a nice effect for saving data on a form.

The way that the effect works is:

  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.

The first post is about using Mootools to create the effect. Below is an excerpt from the post.

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"/>

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;
}

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>

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});

You can read the full post here. You can view the demo here and you can download the tutorial including Mootools here.

The second post is about using Dojo to create the same effect. Below is an excerpt from the post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Test save</title>
<script type="text/javascript" src="/js/dojo/1.0.2/dojo/dojo.js" djConfig="parseOnLoad: false,usePlainJson: true"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.query("#save_button").onclick(function(){
dojo.fadeIn({
node:"box",
duration:500,
beforeBegin: function() {
dojo.query("#box").style("opacity", 0).style("display","block")[0].innerHTML = "Save in progress...";
},
onEnd: function(){
dojo.xhrGet({
url: "data.txt",
handleAs: "text",
load: function(data){
var node = dojo.byId('box');
node.innerHTML = "Saved !";
dojo.fadeOut({
node:"box",
duration:1000,
onEnd: function(){
dojo.query("#box").style("display", "none");
}
}).play();
},
error: function(data){
console.debug("An error occurred: ", data);
},
timeout: 2000
});
}
}).play();
});
});
</script>
<style type="text/css">
#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<input name="myinput" type="text" />
<input id="save_button" name="save_button" type="button" value="save"/>
</body>
</html>

First thing, I connect the onclick event to #save_button button.

dojo.query("#save_button").onclick(function(){

I use the dojo.query method. with #, it return a dom object whom id is matching #save_button. There are lots of possibility, because it supports CSS3 selectors. (see here)

I did a fadeIn effect on div #box. In dojo, the div you fadeIn has to be visible. So I set its opacity to 0 and its display to block. Notice the chain ;)

When effect is ended, I start an ajax request using dojo.xhrGet.

dojo.xhrGet({
url: "col.htm",
handleAs: "text",
load: function(data){
var node = dojo.byId('box');
node.innerHTML = "Saved !";

You have to pass an object to this fonction. It's much more readable than a simple function call with parameters. And of course, you can omit parameters.

The load function is called when ajax request ends. At this time, I set box content to "Saved !" and apply a fadeout effect.

dojo.fadeOut({
node:"box",
duration:1000,
onEnd: function(){
dojo.query("#box").style("display", "none");
}
}).play();

dojo.fadeOut or dojo.fadeIn return an anim object. You play the anim with play() method (Wow !)

At the end, I set box display to none, so that box div returns to its initial state.

You can view the full post here.

The effect could be pretty useful. The nice thing about the tutorials is that you can kind of compare the code required to accomplish the effect in both libraries. I was looking to see if someone wrote the same effect in jQuery so that I could have that code to compare, but I haven't found this in jQuery, so if you know of a post about this in jQuery I would love to see it (you can leave it in the comments or you could write a post about it on this blog with your free Ajaxonomy account).

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.