Zugg Software :: View topic - Looking for Javascript treeview navigation control

Posted: Fri Feb 23, 2007 4:05 am

OK, I think I found my own answer to this, but if anyone has any other suggestions for the following situation, please let me know.

Here is what I want to do: You all know about the Knowledge Base, right? On the left is a semi-hierarchical view of the documentation. When you click on a topic, the help page is shown, and the contents on the left are updated.

It's a really really crude implementation. What would be more ideal would be a real "treeview" control where you could expand and collapse the help topics and then select the topic you wanted.

In other words, I'd like the online application to work more like the built-in help within CMUD itself.

Now, there have been DHTML and Javascript tree views for a long time. However, I also want to use AJAX to load the help topic. There is no sense in downloading the entire contents menu for each help topic. Instead, when you click on a topic in the tree view, it can just generate an asynchronous query to the server and display the appropriate help topic text on the right side of the screen.

So I don't want to use frames and all of that crap. And a free treeview control would be best of course.

Well, after much searching, I came across a gem of a site. Maybe everyone already knows about it and I'm just slow to all of this new web 2.0 stuff. But the site is the Yahoo! UI Library (YUI). They have developed a large collection of very interesting Javascript/Ajax components, including a Treeview!

I was just amazed at looking through this list. They even have a new component that should solve the browser history issue with Ajax. For example, when you click on a help topic in the tree view, your browser doesn't normally know that you have displayed a new page. So nothing gets entered into the Back/Forward history for the browser.

But with the new Yahoo! component, I could add a history entry whenever you click a new help topic, allowing the back/forwards functions in the browser to still work as expected!

This is really cool stuff! Since the Knowledge Base is already 90% of my own custom code, it seems like a good place to start with learning how this Ajax and Javascript stuff works. And then we'll have a real showcase help system on this web site.

Anyway, if you know of any other really good components like the Yahoo! set, please let me know. I'm really excited about the possibilities!

GURU Joined: 24 Sep 2000 Posts: 1237 Location: USA

Their Event class absolutely rocks too... http://www.dustindiaz.com/yahoo-event-utility/

Posted: Fri Feb 23, 2007 6:09 pm

That's a great article, thanks for the link! That's very exciting because I was trying to figure out how to implement a nice interface for "tagging" posts. I want to have a list of all current keywords on the right side of the screen and let the user select the keywords to add to the post. So each keyword would be a checkbox. But I also wanted to have a normal text field where you could just list the keywords you wanted (which is how you create new keywords).

What I was trying to figure out how to do was set up onClick events for all of the keyword checkboxes so that clicking a checkbox would add or remove the keyword from the text field automatically. I was thinking that it would be really nice if I could just assign a CSS class to each checkbox and then somehow assign a single onClick event to the entire class. And it looks like I can do that easily with the Yahoo Event class. Very sweet.

I know this must seem pretty mundane to people like Darker who do web design for a living, but I'm pretty amazed by all of the progress just in the last year since I spent time writing our online shopping cart system. I was just learning CSS back then and getting comfortable with it. But it seems that Javascript has come a long way in that year, or at least more people are giving it some serious attention (finally) and the cross browser issues are being dealt with better.

The HelpSpot help desk system that we use for all of our support email (and for the CMUD crash dump organization) uses a *lot* of Javascript and Ajax code and is a really great application. It achieves nearly desktop-like performance, and yet allows us to do our help support from any web browser on any computer. Five years ago I would have never thought it was possible without annoying browser-specific ActiveX controls.

Wizard Joined: 14 Aug 2004 Posts: 1269

Sweet! Thanks for the links. I started looking at this after Zugg's post and came across their Event class, and it looked pretty cool (along with lots of other stuff), so thanks for the link with more info.

I agree with Zugg. It is amazing how far JavaScript has come in the past few years, even with no language enhancements since Dec 1999 being used. Although that does go to show how unobvious these applications are to create from scratch in JavaScript (and still work cross-browser) and why it took so many years to come up with them (the nice ones)!