Published: Wednesday, February 20, 2002
Enhancing the Dynamic Tree Menu System
By Sam M. Reynoso
Introduction
In the summer of 2001, 4GuysFromRolla.com published an article I wrote entitled
A Dynamic Tree Menu System that described how to build a
Web-based treeview control using only ASP, XML, and Javascript. After its publication I began
receiving email from many developers who had incorporated my solution into their projects.
Most were happy with the sample code I provided, but a few were critical and pointed
out a laundry list of things they wished were included in the sample.
I took many of their suggestions into consideration, and over the course of the
last six months completely rewrote the sample code from scratch. The code is now
streamlined and includes many of the features that were requested. This
follow-up article is an attempt to share these improvements with the 4Guys community.
This article assumes the reader is familiar with the basic underlying mechanism
described in the original article. (You're strongly encouraged
to read the original article before reading this followup.)
| Microsoft's XML Parser |
|---|
|
To use the Dynamic Tree Menu System you will need to have Microsoft's XML parser (MSXML) installed
on your Web server. You can get the free MSXML parser download at:
http://www.microsoft.com/xml/. (Go straight to the
download
page.)
|
This article contains, mostly, a description of the changes between my earlier version of the
Dynamic Tree Menu System and this updated version. You can download
the complete source code for this application at the end of this article. You can also
view a live demo of the dynamic menu-based system.
Crossbrowser Compatibility
The original sample code worked beautifully on Internet Explorer,
but did not work at all under Netscape or any other browser. Although the original
article clearly stated that the sample code was intended only as a demonstration
of what was possible with XML, ASP, and Javascript, many readers nevertheless
insisted that cross-browser compatibility should have been taken into consideration.
It turns out that making the code run under Netscape 6.x required very few modifications.
Unfortunately Netscape 4.x was a completely different story, since that browser
cannot deal with multiple levels of nested tables (the sample code will crash the browser).
(Special thanks go out to 4Guys reader Keith Parker who suggested the
simple changes to support Netscape 6.x and Mozilla browsers.)
The original code handled mouse clicks with a handful of IE-specific functions.
For example, all folder clicks were captured by the document.onclick which redirected
them to the doChangeTree() function with this line of code:
document.onclick = doChangeTree;
|
Once inside that function, a reference to the clicked object was obtained with the
following line:
srcElement = window.event.srcElement;
|
If the code determined that the clicked item was a folder, a reference to that object
was obtained using the document.all() method.
To make this code work with Netscape 6.x browsers, it was necessary to find a way
to call the doChangeTree() routine whenever a folder was clicked. The solution was
to connect the function to the onClick event on the folder's <IMG>
tag. We also had to pass the Javascript this object as one of the parameters:
<img onclick="doChangeTree(this, arClickedElementID, arAffectedMenuItemID);">
|
Inside of doChangeTree(), we no longer have to rely on the IE method
window.event.srcElement to retrieve the clicked object's reference. Instead we get
the reference directly from the e parameter containing the this object.
Finally, when it is necessary to lookup an object's reference dynamically using its
ID, we call the standard document.getElementById() function instead of the IE-specific
function document.all.
To summarize, here are the code differences between the original and the new
crossbrowser version:
======== ORIGINAL CODE ========
document.onclick = doChangeTree;
======== CROSSBROWSER CODE =========
<img onclick="doChangeTree(this, arClickedElementID, arAffectedMenuItemID);">
======== ORIGINAL CODE ========
function doChangeTree()
{
var srcElement = window.event.srcElement;
.
.
.
======== CROSSBROWSER CODE =========
function doChangeTree(e, arClickedElementID, arAffectedMenuItemID)
{
var srcElement = e;
.
.
.
======== ORIGINAL CODE ========
function fnLookupElementRef(sID)
{
var i;
var iClickedElemLen = arClickedElementID.length;
for (i=0;i<iClickedElemLen;i++)
if (arClickedElementID[i] == sID)
return document.all(arAffectedMenuItemID[i]);
.
.
.
======== CROSSBROWSER CODE =========
function fnLookupElementRef(sID, arClickedElementID, arAffectedMenuItemID)
{
var i;
for (i=0;i<arClickedElementID.length;i++)
if (arClickedElementID[i] == sID)
return document.getElementById(arAffectedMenuItemID[i]);
.
.
.
|
In Part 2 we'll look at some more new features of the
Dynamic Tree Menu System, including some UI enhancements and the ability to load the tree menu data
from a database table.
Read Part 2!
