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

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:
  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-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 />

<label for="lastname">Last Name:</label><br />
<input id="lastname" name="lastname" type="text" /><br />

<input type="submit" value="Save" /> </fieldset>
</form>
<div id="help">
</div>
</body>
</html>

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.



 
 
>>> 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: