coldfusion to javascript drop-down 1

[JohnandSwifty]

Hi,

I currently have two drop-down menus used to search by product categories. The first selection polpulates the second with the relevant sub categories (javascript).

I now want to give the site more flexibility and have the list for the drop-downs created dynamically (so categories can be added etc without having to alter code). Is there any way of creating a javascript array from a coldfusion query?

Thanks

 

[GUJUm0deL]

This would be tricky as CF is processed at the server level, and JS is processed at the browser level.

I had something similar to do at work last week, I had two drop-downs, 1st drop-down has the 'parent' options, and the 2nd drop-down has the 'child' options in that it depends on the 1st option set to populate the 2nd option set.

I thought about JS, like you did, but relazied that maintaining that would be problematic (esp when the user has JS disabled). What I did (and this may not be optimum for you) is I split my form into 3 sections.

1st section displays the 'parent' option list, 2nd page displays the 'child' option list that populates based on the value selected from 1st page. And, finall the 3rd page displays the rest of the form.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ecobb]

Um...If I understand your question correctly, the answer is Yes, you can very easily populate a JavaScript Array from CF.

Just have a query pull the info from the database, then in your JS, use cfoutput to populate the array. When it renders the html/js to the browser, you should have a JS array with all of the values pulled from your query.



Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[ChuckB85]

I have made this exact thing. Two dropdown menus that are dynamic based on values stored in an access dbase. To change the values all you need to do is update the access tables. The nice thing is that the page does not refresh when you change the parent dropdown.(perfect for forms that can't be submitted or refreshed til other form fields are populated)

I used CF and JS however, I will not be able to post the code til around 4:00pm EST because it is at home and I'm at work right now.

I'll post later on this afternoon,
-Chuck

 

[JohnandSwifty]

Right - have a scan of below. The first drop-down obviously populates fine - but it seems like the javascript isnt receiving the var - one for the javascript forum now?



<!--- Queries --->

<cfquery datasource="SYSTEM" name="FindCatLevel2_11">
SELECT DISTINCT
CatLevel1Code,
CatLevel2,
CatLevel2Code,
CatLevel2Ord
FROM CatMapping
WHERE CatLevel1Code = '11'
ORDER BY CatLevel2Ord
</cfquery>

<cfquery datasource="SYSTEM" name="FindCatLevel2_12">
SELECT DISTINCT
CatLevel1Code,
CatLevel2,
CatLevel2Code,
CatLevel2Ord
FROM CatMapping
WHERE CatLevel1Code = '12'
ORDER BY CatLevel2Ord
</cfquery>

<!--- End Queries --->

<!--- Javascript function --->

<!--//
function Cat2Menu(CatLevel2) {
var Indx=CatLevel2;
with (document.ProductFilter.CatLevel2)
{
document.ProductFilter.CatLevel2.options.length=0;
if (Indx==11)
{
<cfoutput query="FindCatLevel2_11">
options[0]=new Option("#CatLevel2#","#CatLevel2Code#");
</cfoutput>
}
if (Indx==12)
{
<cfoutput query="FindCatLevel2_12">
options[1]=new Option("#CatLevel2#","#CatLevel2Code#");
</cfoutput>
}
ProductFilter.CatLevel2.options[0].selected=true;
}

}
//-->

<!--- End Javascript Function --->

<!--- Form Bits! --->

<cfform name="ProductFilter" action="YOURSITE.cfm">
<cfselect name="CatLevel1" onChange="Cat2Menu(this.selectedvalue);" size="1">
<option value="">All</option>
<cfoutput query="FindCatLevel1">
<option value="#CatLevel1Code#">#CatLevel1##CatLevel1Code#</option>
</cfoutput>
</cfform>

<!--- End Form --->

 

[johk02]

Have a look at this link.
I am not to sure if this is what you are after. Haven't tried it myself.

Cheers

Jonas

 

[johk02]

oppps forgot the link

http://www.webtricks.com/sourcecode/code.cfm?CodeID=18