GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes My AJAX Chained Selector Function (Enjoy!) Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "My AJAX Chained Selector Function (Enjoy!)" Watch "My AJAX Chained Selector Function (Enjoy!)" New topic
Author

My AJAX Chained Selector Function (Enjoy!)

Jason Ferguson
Ranch Hand

Joined: Aug 09, 2007
Posts: 58
As a nice change of pace, I thought I would actually post some working code here for people to use. However, I wouldn't mind suggested improvements.

This code is useful for creating AJAX Chained Selectors (one select box populates the next, and so on). It is based on the Prototype javascript library.

The function expects the id field value of the "source" select box, the id value of the "destination" box, and whatever action that AJAX will have to call to retrieve the set of results (in JSON format) to populate the destination select box with. The JSON fields are expected to be "id" and "name". (Note: personally, I use a Struts action that retrieves a collection, then uses json-lib to convert the collection to a JSON array, then uses HttpServletResponse.getWriter() to print it out.

Anyhow, here you go:

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I would not remove the children to remove the options, there is a way to do it in one line.

I would not use createElement, I would something else tha lets you add options in one line.

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Also should add

i is global and not local

local variables have quicker lookup when being referenced.

Referencing json.length is is slower and storing a reference into a variable and using the variable in a loop. var len = json.length;

for(var i=0;i<len;i++){

Also nice to destory object references when done using them.
myRef = null;

Eric
Jason Ferguson
Ranch Hand

Joined: Sep 16, 2007
Posts: 47
Since the script requires the Prototype library anyways, I'll probably switch to using its DOM management functionality. I ordered a dead-tree reference (Prototype and Script. aculo. us: You Never Knew JavaScript Could Do This!) and will alter the DOM functionality accordingly.

Originally posted by Eric Pascarello:
I would not remove the children to remove the options, there is a way to do it in one line.

I would not use createElement, I would something else tha lets you add options in one line.

Eric
Jason Ferguson
Ranch Hand

Joined: Sep 16, 2007
Posts: 47
Ouch... you're right. I didn't think to consider storing the results of json.length because I had forgotten to consider that said length could be completely arbitrary.

I also forgot to dereference the object, good catch.

Thanks!
Jason

Originally posted by Eric Pascarello:
Also should add

i is global and not local

local variables have quicker lookup when being referenced.

Referencing json.length is is slower and storing a reference into a variable and using the variable in a loop. var len = json.length;

for(var i=0;i<len;i++){

Also nice to destory object references when done using them.
myRef = null;

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You could have ordered Bear's book:

http://www.amazon.com/Prototype-Scriptaculous-Action-Ajax-Crane/dp/1933988037/jr-20

For the length...it is easy as



for adding a new option it is as simple as



Best thing with JavaScript it to limit the number of lookups. More lookups in the DOM tree means longer something takes to execute. Eliminate the greatest number of "dots" that makes sense for reuse.

Eric
 
GeeCON Prague 2014
 
subject: My AJAX Chained Selector Function (Enjoy!)