Just-in-Time Information and Ajax - JavaScript with Caching and Event Management (
Page 4 of 4 )
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 />
<a href="help.php?item=lastname" accesskey="l" title="opens help window for lastname
field" rel="external">
<label id="lastname" for="last">Last Name:</label></a>
<br />
<input type="text" id="last" name="last" /><br />
<input type="submit" value="Save" /> </fieldset>
</form>
<div id="help">
</div>
</body>
</html>
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
Please check back next week for the continuation of this article.
