Running Queries Using JavaScript?
CF Muse Reader Asks:
I am trying to develop 3 drop down list boxes which gets the data from the database. On change of first will pop up second and on change of second will get the values based on first and second. Do you know the smartest way to do this. How can I run queries from JavaScript?
The first thing to decide is, do you really want to connect to the server for each change in the drop down box? The answer depends on the size and schema of the database.
Choice 1 - Client Side Using "threeSelectsRelated"
If what you are trying to do encapsulates typical drill down functionality and the dataset is small you might consider using cf_threeselectsrelated (see this page near the bottom). It loads up all the data into JS arrays and then sorts through the data based on your selections. For example, if your first box was country and you chose "USA" the second box would suddenly contain "States". Selecting California would cause the filter to trigger for the third box which would now contain cities - and so on. The draw back for this tag is that it doesn't scale well. A really large dataset or a data set where you cannot easily join all the items into a single query won't behave as expected.
Choice 2 - Ajax Using CF Ajax.
The Cfajax project gives you custom tags, CFC's and several samples that mimic the behavior you are looking for. Ajax relies on JavaScript and the "XMLHttpRequest" client object to make requests back to the server. The server (in the case of Cfajax) returns XML which is deserialized into an object and used to load your drop down box (or whatever else you have in mind). The drawback to Ajax is the heavy dependence on JavaScript. For example, the Cfajax tag requires 3 js files to be sourced on each page using ajax.
Choice 3 - Use Flash With Flash Remoting
This approach as the advantage of the most potential for visual appeal because flash is a much better visual medium than HTML. Using Actionscript you would create listener objects that fire back to a CFC on the server and populate your drop downs based on user interaction. The drawbacks to this approach are that the programming skills needed are different, Flash is required (although this is marginally no more problematic than requiring JavaScript) and setting up remoting is more complicated. Obviously you could alleviate that last point by using a web service rather than an AMA (pure remoting) call.
Of the choices presented I rather like Ajax for this one. I hope this helps - happy coding.
6 Comments
-
Can you embed the flash remoting into cfforms? Or rather, is there a technique to accomplish this same task when using flash cfforms?
(excuse my ignorance if this is a basic functionality of them, I haven't had a chance to dig into the latest forms yet) -
Alas no you cannnot. One of my pet peeves with flash forms is that you cannot really do anything "flash-like" with them. In my humble opinion flash forms is really a "loss-leader" or a "sales teaser" to try to point you toward Flex (a very nice yet vastly overpriced product). See my post on the flash form limitations for more information.
http://mkruger.cfwebtools.com/index.cfm?mode=alias... -
Another solution is Matt Kruse's Dependent Select Boxes which can be found on his JavaScript toolbox site.
http://www.javascripttoolbox.com/lib/dynamicoption... -
Chris, while I like this solution, it is purely client side. It would fit in the same category as option 1 above - useful to a point, but not terribly scalable.
-
i beg to differ. you can do a ton of "flash-like" functionality with flashforms and the required AS is usually pretty simple & more often than not publicly available (see http://www.asfusion.com/blog/examples/ for instance). -
Update: This appears to be on a different port for others. As Jax pointed out you can go: Eclipse, select Help -> Help contents to get there as well :o)
I was just going into some help files of Aptana when I came across the local address for the Eclipse Help system at: http://127.0.0.1:58041/help/index.jsp
In there was a wealth of information I just didn't know was on my hard drive ... though I suppose it depends on what plug-in's you've got installed but for me I had:
references and getting started tips for Subclipse, plus ColdFusion Documentation, Using CF extensions for Flex builder (including details of RDS support), Java development user guide, plug-in guide and loads more. The Aptana section is indepth as well with documentation covering:
* Ajax Libraries (including Spry 1.5
* CSS (elements and properties)
* HTML
* Javascript (keywords, DOM, core)
* and even javascript reference for Adobe AIR(though that seems to actually hit Adobe.com livedoc (which is slicker than the CF ones!))
Sites to Watch
Aggregators
RSS
