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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Check it out today at your favorite bookstore. Buy this book now.
|
|
