Javascript AJAX Cascading Dropdown

JavascriptAJAXCascadingDropdown

Adding a Javascript AJAX cascading dropdown to your website is more than just a functional interface element. It also integrates sophisticated web technologies on your site.

Breaking Down Javascript AJAX Cascading Dropdown

Before you can put this navigational tool on your site, you should make sure that you really need it. The web is full of sites with elements that are placed there simply because a client heard a buzzword somewhere that made them think they wanted something on their website because "everybody has it - it's the latest thing!" This kind of feature creep is frustrating for both the web designer as well as the client.

A "Cascading Dropdown" is a kind of menu that is used for sites that have sections that can easily be subdivided even further into more sections. For example, a site might have a structure such as:

  • Home Page
    • About Our Founder
    • About Our Employees
    • A Brief History
    • Contact Info
  • Our Services
    • Consulting
    • Evaluation
    • Therblig Optimization
  • Our Products
    • Evaluation Forms
    • Optimized Therbligs

In a web 1.0 world, this kind of menu would simply be a series of links down the left side of the page. However, if you have a cascading dropdown, you only need one link, labeled something like NAVIGATION. Clicking on that will show the main headings: Home Page - Our Services - Our Products. That's the "dropdown" part.

Then, when the user mouses over one of those headings, another dropdown cascades showing the next level of links. For example, Our Services would cascade into Consulting- Evaluation - Therblig Optimization. This method of navigation frees up a lot of screen real estate, and makes it easier to change the site later, as the menu items are usually controlled from a central file (more on that later).

NOTE: While there are some kinds of menus that you can control to some degree using "Cascading Style Sheets", that is not generally what "cascading dropdowns" refers to. Rather, it is the way the display cascades gracefully into different levels of the site navigation.

JavaScript and AJAX

It's a little redundant to say "Javascript AJAX cascading dropdown" since AJAX stands for "Asynchronous Javascript and XML". However, technically you don't have to use Javascript or XML when programming in AJAX, nor does it have to be asynchronous. The term simply applies to a group of techniques used by some web developers in order to increase the interactivity on a website.

In the case of a cascading dropdown, though, it does use both Javascript and XML. The second is used to define the nodes of the cascading menus (XML, or Extensible Markup Language, is made for defining taxonomies of data) and the first is used to load the XML file necessary to populate the dropdown. In fact, the code necessary to load the file is relatively simple Javascript:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); function loadXML(xmlFile) { Â xmlDoc.load(xmlFile); Â xmlObj=xmlDoc.documentElement; }

However, while that is all that you need, the full technique requires a lot of verification and multiple levels of server functions, not to mention the very strict syntax and information architecture planning required to correctly create an XML file. However, once the XML is created, if it needs to be changed with the growth of the website, you only need to change it in ONE place for it to propagate across the entire site - anywhere the Javascript function is called, in fact. This is the vast advantage of Javascript over straight HTML. However, note that if javascript is disabled, the dropdowns will not work; it's a good idea to have a link to a site map in straight HTML on your pages as well.

Where to Learn

The esoterics of AJAX and Javascript are beyond the scope of this article. However, there are many places on the web where you can deepen your knowledge of both, and SkillFusion has an extensive article about this particular method, as well as links to tutorials on other aspects of AJAX as well.

Javascript AJAX Cascading Dropdown