Dojo ItemFileReadStore to the Rescue
The Dojo core provides an implementation of a read-only data store called ItemFileReadStore.
This store reads the JSON structured contents from an HTTP endpoint (service
for simple and quick access. They can easily represent associated hierarchical
data, but by chaining each list by the selected value, there is no need to do
so. Here is a sample of the
To include the data stores in your page, add the following HTML code:
You'll also have to import the module by adding
dojo.declare(). It accepts three parameters:
- The name of the Widget (Ours is called "widgets.ChainedSelect")
- One or more
classes from which yours inherits from (We are extending the
- An object literal that contains any additional properties and functionality that we are adding to the base class(es)
Is Anybody Listening?
The first of two new properties is the
listeners array. I love the idea of
having listeners to an object's events, because it doesn't limit us to having
just one. We can add any type of new listener to this object by simply pushing
it onto the
listeners list. That way, you could update multiple controls at
the same time. The listeners array is loaded in the
postCreate() event as follows:
dojo.query() function finds all elements that have a parent attribute that
is set to the ID of the current widget. We do not store the listener elements
because they probably have not been converted into widgets yet, so their node
structure is useless to us. Instead, only their ID is pushed to the
onChange() event, a lookup is performed on each listener's data store
using our second property, the
lookupField. The query returns all of the items
using the asterisk (
*) symbol if there is no value selected from the parent
All that's left for us to do is add the HTML code for our widgets in the page. Set the attributes as follows:
dojoTypeattribute to our
storeto their respective
- The child uses the
Putting the States and Cities ChainedSelects to the Test
When selecting from either listbox, the FilteringSelect provides some auto-complete suggestions for us:
If we type in something that is not in the list and tab off of the field, a default error message is displayed:
Selecting a valid state causes the city list to be populated with the associated cities:
Feel free to place the files on your Web server and give the Chained Selects a try.
Today we saw how easily we could create chained select boxes using the Dojo
libraries. In a future article, we will be exploring additional possibilities,
including how to decouple the setting of the query property from the parent
onChange() event handler, setting default items, clearing the previous
selection, and more!
Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .
resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!
Original: December 17, 2010