JavaScript
  Home arrow JavaScript arrow Page 4 - Just-in-Time Information and Ajax
Dev Shed Forums 
Administration  
AJAX  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Forums Sitemap 
IBM® developerWorks 
Sun Developer Network 
Dedicated Servers 
E-Commerce Hosting 
Linux Web Hosting 
Managed Hosting 
Small Business Hosting 
Actuate Whitepapers 
VeriSign Whitepapers 
VPS Hosting 
Weekly Newsletter

 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Just-in-Time Information and Ajax
By: O'Reilly Media
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 2 stars2 stars2 stars2 stars2 stars / 3
    2007-09-27

    Table of Contents:
  • Just-in-Time Information and Ajax
  • Just-In-Time Information continued
  • Link Workaround: Problems and Solutions
  • JavaScript with Caching and Event Management

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT

    Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here

    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 an excerpt from the book "Adding Ajax," published by O'Reilly. We...
       · Isn't the aaManageEvent function missing in the article?
       · Agree.
     

    Buy this book now. 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.

       

    JAVASCRIPT ARTICLES

    - Getting Attention with Interactive Effects
    - Interacting with Tooltips and Previews
    - Just-in-Time Information and Ajax
    - Interactive Effects
    - Using Cookies With JavaScript
    - Understanding the JavaScript RegExp Object
    - Controlling Browser Properties with JavaScri...
    - Using Timers in JavaScript
    - Form Validation with JavaScript
    - JavaScript Exception Handling
    - Stringing Things Along
    - Understanding The JavaScript Event Model (pa...
    - Understanding The JavaScript Event Model (pa...
    - An Object Lesson In JavaScript





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway