Hi,
I am developing a newsletter app that needs a few multi level dependant dropdown selects to work using Javascript preferably jQuery.
Coldfusion MX7
All data is stored in a SQL database
For example An editor must select a Owner from a dropdown, then select templates from a dropdown dependant on the owner and then select an edition based on the template selected.
I need to come up with a solution and I’m stumpped!
All ideas welcome. If you need more information please ask.
ok, I think it’s safe to assume this is a database driven website.
since you want to use javascript/jquery, then that means using AJAX to get the records needed to populate the <selects>'s based on the option chosen in a previous <select>.
I don’t know how to do it Coldfusion, but the general process will be something like this.
add an onchange event handler to the owner <select>
when an owner is chosen, the event handler in 1) calls a javascript function that sends the chosen owner in an ajax request to the server to retrieve the templates from the database associated with the chosen owner.
The retrieved templates in 2) are then used to populate the <options> in the template’s <select>. The template’s <select> will also need an onchange similar to the one in 1)
when a template is chosen, the event handler in 3) calls a javascript function that sends the chosen template in an ajax request to the server to retrieve the editions from the database associated with the chosen template.
The retrieved editions in 4) are then used to populate the <options> in the edition’s <select>.
I see you’re using CF7. Are you able to upgrade to CF8 or 9?, or are you restricted by what is running on your server?
Anyway, if you’re able to upgrade, you should have a look at this article from Ben Forta(ColdFusion Ajax Related Selects). The good things from the bind method are;
If there is no possibility to upgrade, you need indeed a Coldfusion/Javascript or Javascript solution. You can have a look, at this method from Dynamic Drive. Maybe that’s something you could use.
Like I said, If you can upgrade do it right away, I find using event handlers like onchange=“this.form.submit();”, allthough they can come in handy at times, a nightmare for obvious reasons.
interesting :scratch:
I can’t think of a reason why event handlers should be a nightmare.
i don’t see how that would be offtopic
one obvious reason for the nightmare would be that not everyone browses with javascript enabled
I wouldn’t think that is the reason because then all of javascript would be a nightmare and not just event handlers as was implied.
and it depends on whether the client requires non javascript browsers to be supported.
this shouldn’t need to depend on a client directive – it’s no more costly to support graceful degradation
Amen!
yep you’re right it shouldn’t depend on that but for me it is more costly to provide additional alternative content if a client specifies non javascript browsers to be supported due to the extra time and so I sometimes provide 2 quotes (when non javascript support is requested) - 1 for just javascript and 1 for both javascript and non-javascript browsers.
but anyway, I was more interested in why donboe saw event handlers as a nightmare.
then ur doing it wrong 
now you are resorting to just blatantly not telling the truth and I can give you a 100% guarantee you are unable to post anything that proves how I could have provided some of my clients both javascript and non javascript content in the same time, especially when you haven’t seen the project specifications.
you making unconditional statements that I know to be not true simply reflects poorly on you. the onus of proof is on you if you want to be taken seriously.
I’ll pass on your comments to a few other people and in a couple of other forums and see what sort of feedback I get on the accuracy of your comment
if you would like to discuss further, why not start a new thread instead of attempting to hijack this one 
One reason would be, when I would use the already mentioned:
onchange="this.form.submit();",
used in some Javascript methods for populating dependent drop down menus, I no longer can use the form action=“” attribute! Of course I could use another handler to solve that problem, but when you don’t need them, why use them?
After going back through my CF WACK books i found the CFselect bind tools and after speaking with my team found out we are about to switch over to CF8 so i have developed it using CF8 Bind method. I will post my results when finished.
Cheers everyone.
Steve
Hi Steve, Good for you . I use the bind method since reading that article and it’s working great.
Keep us posted
yep ok, fair enough.
but another option to populate dependent <select> lists is to use ajax so that you don’t have page refreshes after an option has been chosen in each <select> and so you can then still use the form’s action attribute to submit the form after selections have been made in all the <selects>s.
I was referring to the Javascript methods that uses onchange=“this.form.submit();” . The method I mentioned would be my first choice, but as you can see, that one is with Ajax as well. Maybe the word nightmare was a bit overdone, but I like Drama, I have a movie/tv background 
But like I said as well
they can come in handy at times
So don’t worry I don’t p…s off Javascript
[ot]
ok - no harm done :)[/ot]