Home arrow JavaScript arrow Page 4 - Just-in-Time Information and Ajax

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:
  1. Just-in-Time Information and Ajax
  2. Just-In-Time Information continued
  3. Link Workaround: Problems and Solutions
  4. JavaScript with Caching and Event Management
By: O'Reilly Media
Rating: starstarstarstarstar / 4
September 27, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More JavaScript Articles          >>> More By O'Reilly Media
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: