JavaScript with Caching and Event Management - 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-6. The Just-In-Time form help using Ajax

var xmlhttp;
var helpItem;
var helpObj = new Object();
aaManageEvent(window,"load", function() {
  var items = document.getElementsByTagName('label');
  for (var i = 0; i < items.length; i++) {
      aaManageEvent(items[i],"mouseover",showHelp);
      aaManageEvent(items[i],"mouseout",hideHelp);
}
});

// retrieve the help info
function showHelp(evnt) {
evnt = (evnt) ? evnt : window.event;
// get XMLHttpRequest object if not set
if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
if (!xmlhttp) return;

helpItem = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id;
var qry = "item=" + helpItem;

// if cached item, print existing and return
if (helpObj[helpItem]) {
printHelp();
return;
}

// invoke help system
var url = 'help.php?' + qry;
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = getHelp;
xmlhttp.send(null);
}

// hide help field
function hideHelp() {
document.getElementById('help').style.visibility="hidden";
}

// display help field with help
function getHelp() {
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      helpObj[helpItem] = xmlhttp.responseText;
      printHelp();
   }
}
function printHelp() {
var help = document.getElementById('help');
help.innerHTML = helpObj[helpItem];
help.style.visibility="visible";
}

In the web page, the CSS and JavaScript files are linked in, and the form labels are wrapped in hypertext links with the individual help item attached to the URL for each, as shown in Example 4-7. The links also have an explicit title with clear information that clicking the links will open a second window, in addition to the rel="external" attribute/value.

Example 4-7. JIT help pagevalid, accessible, and active

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Field Help</title>
<link rel="stylesheet" href="jit.css" type="text/css" media="screen" />
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript" src="jit.js">
</script>
</head>
<body>

<form action="ch04-05.htm" method="post"> <fieldset>
<legend>Personal info
<a href="help.php?item=firstname" " title="opens help window for firstname field"
rel="external">
<label id="firstname" for="first">First Name:</label></a><br />
<input type="text" id="first" name="first" /><br />

Figure 4-1 shows the page with one of the help items displayed.

Lots of code for a simple effect, but the pieces are in place to make this into a library of JavaScript functions to provide JIT help for more than forms. JIT help is almost equivalent to another effect known as the tooltip. All that remains now is expanding the functionality to other objects and positioning the displayed material where the event occurs.

Figure 4-1. A form that uses JIT help