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

Link Workaround: Problems and Solutions - 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

There are two problems with the link workaround. One is that XHTML 1.0 Strict does not support the target attribute. The other is that you need to warn folks using a screen reader or other assisting device that they will open a new window if they click the link.

You could avoid both of these problems by opening the help within the same page, but that is not a good solution for providing help in a form, especially a form that has been partially filled in. A popular approach to this problem is to attach a rel="external" key/value attribute pair to the links to open in new windows and use JavaScript to create a new window when the link is clicked. However, one of the primary reasons for having the help open in a new window is because scripting is disabled.

There are also people who will want to click the link anyway because they're using screen readers that may not pick up the help that's generated dynamically. Again, we don't want to overwrite their half-filled form. For them, we could either decide to blow off the XHTML 1.0 Strict validation (tempting), or create the JavaScript to intercept the click and open the new window.

I can't tell you which is the best option, as only you can determine what's important for your applications and your clients. For now, I've extended the addingajax.js file to add the link interception routine based on the rel="external" attribute, which at least gives us this option. Example 4-5 shows the new library entries, including the window onload event handler to process the links.

Example 4-5. New library entries to provide an XHTML variation of the anchor target attribute

function externalLinks() {
 
var anchors = document.getElementsByTagName("a");
 
for (var i=0; i<anchors.length; i++) {
  
var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}

aaManageEvent(window,'load',externalLinks);

A third option to the XHTML Strict and target problem is to extend the XHTML by creating a custom DTD. For discussion of this, see Wayne Burkett's weblog post, "Extending XHTML: Target and Strict," at http://dionidium.com/2004/05/xhtml-tests.

Though the page's static contents now validate, this approach does add invalid markup dynamically. A second way to code this function, one that bypasses the validation issue completely, is to use the following with each anchor:

  aaManageEvent(anchor,'click',function() {
        window.open(this.href);
        aaCancelEvent(event);
  });

This code opens a new window without adding invalid markup statically or dynamically. This approach does require accessing the event object in order to process the cancel event method call.

While we're improving the application, we can add some frills to our help to make it seem a little more polished. We will change the background color and add a border. The stylesheet is moved into its own file, jit.css:

  #help
 
{
     background-color: #FFFF8F;
     border: 1px solid #82887e;
     left: 300px;
     padding: 10px;
     position: absolute;
     top: 20px;
     visibility: hidden;
  }
  form
  {
     margin: 20px;
       
width: 500px;
  }
  input
  {
    
margin: 10px;
  }
  label
  {
    
cursor: help;
  }
  a
  {
    
text-decoration: none;
  }

The JavaScript is also pulled into a separate file, jit.js. The new script, shown in Example 4-6, adds caching and event management on the labels. The JavaScript to show the help is split out into a separate function and called from both the XMLHttpRequest processing function, as well as the showHelp function--if the
element's help is cached.



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