Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

My AJAX Chained Selector Function (Enjoy!)

 
Jason Ferguson
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 47
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 47
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic