Creating a Gmail Like Ajax Status Display

Most of us geeks know and love Gmail. It has a very nice interface and it is an inspiration to constantly improve our own web applications. Today, I set out to create an unobtrusive Gmail like page status message, much like the one shown in the screen shot:

 

My requirements were simple:

1. Should look like the one used in Gmail
2. Should be able to just include the source JavaScript file without any further configuration
3. Should allow the user to specify a custom status message to be displayed
4. Should allow for the use of custom styles but none are required
5. Integrates with Prototype.js Ajax requests

The only prerequisite is Prototype.js v1.6

Let's get started. If all you care about is the end result. Here how to include it in your page:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ajaxStatusDisplay.js"></script>

That's it! Now whenever you make an Ajax request with Prototype, you will see a message popup with the text "Loading...". You can check out the end results at http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Simple.html

Now to the advanced features.

As stated #3 and #4 above, two of our requirements are to allow the user to specify a custom status message and custom CSS styles for the displayed message. Satisfying the first one of those requirements is done by having the user create an element on the page with the custom message like so:

<div id="ajaxStatusDisplay_userMessage">
Loading...Wait a Minute!
</div>

This element does not have to be a div. It could be a any text container such as span or even input (text or hidden). What is important is the id of the element, it has to be set to "ajaxStatusDisplay_userMessage" for the custom message to be picked up.

The next requirement works much in the same way. Custom styles can be specified by creating two CSS classes with certain names: "ajaxStatusDisplay_userStyle" and "ajaxStatusDisplay_userMessageStyle". Here an example that will produce the default look:

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:45%;top:2px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background:#FFF1A8 none repeat scroll 0%;color:#000;padding: 0pt 5px;
	font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight: bold;
	text-align:center;width:100%
}
</style>

And here is another example that will produce a white text on black background in the top right corner:
 

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:94%;top:0px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background-color:#000;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	padding:2px;
	width:100%;
}
</style>

To use the your own CSS styles, you do not need to do anything but define them as shown above (as compared to the initial version where you needed to edit the file "ajaxStatusDisplay.js" and set the "useUserCssStyles" variable to "true").

A small extra feature is the ability to change the status message at runtime. This is done by using (you guessed it), the "setStatusMessage" function as follows:

// Set the status message based on the value in the "userMessage" input field
ajaxStatusDisplay.setStatusMessage($F('userMessage'));

To see setting the status message in action along with using a custom CSS style, check out http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Advanced.html

You can view all the sources at:

JavaScript Source: ajaxStatusDisplay.txt
Simple Example Source: ajaxStatusDisplay-Simple.txt
Advanced Example Source: ajaxStatusDisplay-Advanced.txt

You can download the JavaScript source at:

http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay.js

Neat Prototype Trick - Activate First Form Element Without a Certain Class Name

Let's say you have form with a bunch of fields that you have disabled with the "read only" attribute so the user can't change the data. Also, you have applied a css class called "readOnlyInput" so you can style the input field as read only field (different color or whatever else you like). I had such form this evening but I wanted the focus to automatically go to the first non read only element when the page is loaded. Usually, you can pass focus on a form element by doing this:

// 'myFormField' is the id of form field you want to focus on
$('myFormField').focus();

However, if the input field already contains data, you might want to focus the field and highlight it in the same time. In that case you will do:

// 'myFormField' is the id of form field you want to focus on
$('myFormField').activate();

That is all fine and great but what when I have a bunch of input elements and some of them might be marked "read only". To make things more complicated (as I love to do), I would hate to hard code the id of the first element I want to focus/activate. So here is the solution:

// For each input element on the form
$A($('myForm').getInputs()).each(function(formElement) {
 // If the form element does not have the class "readOnlyInput"
 if (!$(formElement).hasClassName('readOnlyInput')) {
  // Activate that element
  $(formElement).activate();
  // Break out of the loop (prototype specific syntax here)
  throw $break;
 }
});

Just so Doug's kids would understand this, here it is in psudo code:

1. Get a list of form input elements by using Prototype's built in "getInputs" function $('myForm').getInputs()
2. Convert the list of form inputs to a Prototype array $A($('myForm').getInputs())
3. Now for each of the elements in the array, run a function pass in the current element $A($('myForm').getInputs()).each(function(formElement)
4. If the current form element has a css class not matching "readOnlyInput" if (!$(formElement).hasClassName('readOnlyInput'))
5. Activate that form element $(formElement).activate();
6. We found the first element so break out of the loop throw $break;

CSSVista - Edit your CSS code live on Internet Explorer and Firefox

I came across this pretty nice tool called CSSVista. It lets you edit css on the fly. Sure, the web developer toolbar and Firebug already does this for Firefox but it's still cool.

Gmail Type Loading Indicator Update

After Brian Love brought up different browsers in my previous post, I thought I'd see what it takes to make my example look exactly like Gmail's status in both IE and Firefox. Here is the updated CSS. It's been tested with Firefox, IE6 and IE7 at 800x600, 1024x768 and 1280x1024. It includes a special margin definition for IE.

<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;
}

div#statusMessageContainer {
 position: absolute;
 background-color: #cc4444;
 color: white;
 width: 60px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: .8em;
 padding: 2px;
 right: 0px;
 margin-right: 15px;
}
</style>
<!--[if IE]>
<style type="text/css" media="all">
div#statusMessageContainer { margin-right: -20px; }
</style>
<![endif]-->

Gmail Style Ajax Status Message

Here is some css with a test bed to mimic Gmail's loading indicator. Hopefully it will be useful to somebody.

<html>
<head>
<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;
}

div#statusMessageContainer {
 position: absolute;
 background-color: #000000;
 color: white;
 width: 80px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 2px;
 left: 0px;
 font-weight: 700;
}
</style>
<script type="text/javascript">
function ToggleStatus() {
 var toggleButton = document.getElementById('toggleButton');

 if (document.getElementById('statusContainer').style.visibility == 'visible') {
  toggleButton.value = 'Show';
  document.getElementById('statusContainer').style.visibility = 'hidden';
 }
 else {
  toggleButton.value = 'Hide';
  document.getElementById('statusContainer').style.visibility = 'visible';
 }
}
</script>
</head>
<body>
<div id="statusContainer" style="visibility: hidden;">
 <div id="statusMessageContainer">Loading...</div>
</div>
<br />
<input type="button" id="toggleButton" name="toggleButton" onclick="ToggleStatus();" value="Show" />
</body>
</html>

Uppercase first Letter with CF RegEx

I needed to uppercase the first letter of a word before displaying it. Here is neat RegEx (CF specific but will probably work in Perl) that will do just that.

<cfset variable = rereplace(variable , '^(\w)(.*)', '\u\1\2') />

You can use the above when you need it done on the server. Here is the more elegant client side solution with CSS:

<span style="text-transform: capitalize;">boyan</span>

While I'm at it here is nice CF RegEx tester: http://www.cftopper.com/contentfiles/tools/regularExpTester.cfm