Just-In-Time Information continued - JavaScript

In the second part of a four-part series focusing on interactive effects in Ajax, you'll learn how to create "just-in-time information" that gives your visitors the information they need, but only when they need it. This article is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

TABLE OF CONTENTS:

By: O'Reilly Media

Poor Best

Rating:

/ 4

September 27, 2007

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Example 4-4. JIT onfocus form help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > <title>Form Field Help</title>
<style type="text/css">
#help
{
   left: 300px;
   padding: 10px;
   position: absolute;
   top: 20px;
}
form
{
   margin: 20px;
}
input
{
   margin: 10px;
}
</style>
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript">
//<![CDATA[

var xmlhttp;

aaManageEvent(window, 'load', function() {
   for (var i = 0; i < document.forms[0].elements.length; i++) {
      aaManageEvent(document.forms[0].elements[i],"focus",showHelp);
   }
});

function showHelp(evnt) {
evnt = (evnt) ? evnt : window.event;
if (!xmlhttp) xmlhttp = getXmlHttpRequest();
if (!xmlhttp) return;
var objId = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id;
var qry = "item=" + objId;
var url = 'help.php?' + qry;
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = printHelp;
xmlhttp.send(null);
}

function printHelp() {
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('help').innerHTML=xmlhttp.responseText;
   }
}

//]]>
</script>
</head>
<body>
<form action="ch04-04.htm" method="post"> <fieldset>
<legend>Personal info</legend>
<label for="firstname">First Name:</label><br />
<input id="firstname" name="firstname" type="text" /><br />

This is a very simple approach to dynamically providing help. With just the two fields, neither of which really need additional explanation, you wouldn't normally use this approach, but the simplicity does provide a clear demonstration. The server component of the Ajax application is equally as simple:

<?php
//If no search string is passed, then we can't search
$item = $_REQUEST['item'];
if(empty($item)) {
      echo "";
} else {
      //Remove whitespace from beginning & end of passed search.
      $search = trim($item);
      switch($item) {
        case "firstname" :
           $result = "<p>Enter your first name</p>";
           break;
        case "lastname" :
           $result = "<p>Enter your last name</p>";
           break;
        default :
           $result = "";
           break;
        }

echo $result;
}
?>

However, if you have several forms spread out over several pages, providing the same help system to all of the pages allows you to make modifications in the help text in one place instead of in each of several different pages. This approach then becomes much more viable. Additionally, if the application caches the lookup information when it's retrieved the first time, the connections to the server are decreased:

function printHelp() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById('help').innerHTML=xmlhttp.responseText;
       helpObj[helpItem] = xmlhttp.responseText;
    }
}

With the caching modification, the application tests for the existence of the help item in the associative array cache.

Another improvement is to make the help more "on-demand," rather than putting it up only when the page reader enters a field. One way to do this is to capture the click event for the labels rather than the focus event for the fields, and display help when the labels are clicked:

function setUp() {
    var items = document.getElementsByTagName('label');
    for (var i = 0; i < items.length; i++) {
        aaManageEvent(items[i],"click",showHelp);
    }
}

For this approach to work, the labels are given identifiers, rather than the form fields:

<form action="ch04-05.htm" method="post">
<label id="elem1">First Name:</label><br />
<input type="text" /><br />
<label id="elem2">Last Name:</label><br />
<input type="text" /><br />
<input type="submit" Value="Save" />
</form>

A problem with using the labels is there's no way to know that they're clickable. One way around this is to add a mouseover effect to the label, setting the mouse pointer to a question mark. Do this by adding a CSS stylesheet setting to change the mouse pointer to the help cursor (typically a question mark) whenever it is placed over a label:

label { cursor: help; }

Of course, you still have to know to move your mouse over the label to get the cursor. Plus, you have to be using a mouse to realize that the label has a different cursor, and you must have script enabled.

A more unobtrusive and intuitive approach would be to surround the labels with a hypertext link, set the target attribute to a new window name, and display the help based on the mouseover event rather than the click. If scripting is enabled, the mouseover displays the help. If scripting is not enabled, the hypertext link opens a separate window with the help information. This change makes the JIT help "keyboard-enabled" and more accessible for screen readers.

Next: Link Workaround: Problems and Solutions >>