David Sills's muse is fueled by Bach, Beethoven, and Brahms (and Berlioz and Boulez). He has no life, which comports well with the über-geekitude to which he aspires. He reads and writes fitfully in English, Spanish, French, German, Italian (mostly medieval), C, VB, Perl.... Oh, and Java and XSLT, lots and lots of Java and XSLT. Trained somewhere in darkest Central America, he works today at DataSource, Inc., on the product team for the CASE tool Abri. David has posted 9 posts at DZone. View Full User Profile

An HTML List Builder: A Study in Applying jQuery

12.30.2008
| 37976 views |
  • submit to reddit
Accessibility
 
One more detail of implementation is needed to complete requirement 3. We have used a number of onkeyup handlers, which are useful where accessibility via keyboard is an issue. However, moving from one control to the other on an HTML page uses the tab key (or shift-tab, for reversing the motion) and we don't want the use of these keys to fire the onkeyup handler when all we are trying to do is navigate from one control to another!
 
The solution is a simple function that wraps another function, checking the event key code to ensure that it isn't either the tab key (ASCII character 9) or the shift key (16). If the key code passes the test, the inner function will be called:
  var doNotFireOnTab = function(handler) {
return function(event)
{
var keyCode = event.keyCode;
// ignore tab and shift-tab
if (keyCode == 9 || keyCode == 16)
{
return;
}
handler(event);
}
}
Now, we can slightly change the assignment given above:
  handler = moveDownHandler('leftSelect');
leftDownButton.click(handler).keyup(doNotFireOnTab(handler));
Similar changes will be applied to all the onkeyup handler assignments.
 
Conclusion
 
This was a not inconsiderable set of requirements. The simplicity of this solution owes almost entirely to jQuery. Without the underlying library, the code for the solution would be far more complex. Thanks, jQuery!
 
Download
 
I have set up the solution in a WAR file for anyone thinking of giving it a try. Your local Tomcat should easily deploy it; similar solutions in other languages should be relatively straightforward. The solution alternates between an XHTML form containing the list builder (NB. this may confuse older versions of IE) and a page showing the XML sent back to the server with a link returning to the form page.
Have fun!

Legacy
Article Resources: 
Published at DZone with permission of its author, David Sills.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)