Populate a select from a previous selected option

Report · Sep 13, 2017

Hi,

I use coldfusion but i'm no expert i'm trying to populate 3 select field from a previous selection its year/vendor/model of cars to find the appropriate tire size.

I manage to find some code to make the first 2 to load but the 3rd one the model doesnt work here is my code what M I missing or doing wrong ?

<!DOCTYPE html>

<head>

SELECT DISTINCT year

FROM carmodels

order by year DESC

</cfquery>

/*Fonction addLoadEvent */

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

/*Define the options*/

var tab1 = new Array("Sélectionner une année", <cfloop query = "getyear" startRow = "#Start#" endRow = "#End#"><CFOUTPUT>"#year#"<CFIF getyear.currentRow EQ #end#><CFELSE>, </CFIF></CFOUTPUT></cfloop>);

var tab2 = new Array();

tab2["year"] = new Array("Marque");

<cfloop query = "getyear" startRow = "#Start2#" endRow = "#End#"><CFOUTPUT><cfset lannee = '#year#'>tab2["#year#"] = new Array("Sélectionner une marque" <CFQUERY NAME="getvendor" datasource="dataname">SELECT DISTINCT vendor FROM carmodels WHERE year = '#lannee#' ORDER by vendor</cfquery><cfset End3 = getvendor.recordcount><cfloop query = "getvendor" startRow = "#Start2#" endRow = "#End3#">, "#getvendor.vendor#"</cfloop>);</CFOUTPUT></cfloop>

var tab3 = new Array();

tab3["vendor"] = new Array("Model");

<cfloop query = "getvendor" startRow = "#Start3#" endRow = "#End#"><CFOUTPUT><cfset levendor = '#vendor#'>tab3["#vendor#"] = new Array("Sélectionner un modèle" <CFQUERY NAME="getmodel" datasource="dataname">SELECT DISTINCT model FROM carmodels WHERE vendor = '#levendor#' AND year = #lannee# ORDER by model</cfquery><cfset End4 = getmodel.recordcount><cfloop query = "getmodel" startRow = "#Start3#" endRow = "#End4#">, "#getmodel.model#"</cfloop>);</CFOUTPUT></cfloop>

/*The function to load the list*/

function loadList1() {

var list1 = document.getElementById("list1");

for (var i = 0; i < tab1.length; i++) {

var item = document.createElement('option');

item.value = tab1;

item.innerHTML = tab1;

if (i == 0) {

item.selected = true;

}

list1.appendChild(item);

}

if (tab1.length > 0) {

loadList2(tab1[0]);

}

function loadList2(list1Value) {

var list2 = document.getElementById("list2");

var toDelete = list2.childNodes;

var tab = tab2[list1Value];

while (list2.hasChildNodes()) {

list2.removeChild(toDelete[0]);

}

if (tab) {

for (var i = 0; i < tab.length; i++) {

var item = document.createElement('option');

item.value = tab;

item.innerHTML = tab;

list2.appendChild(item);

}

list2.disabled = false;

}

else {

list2.disabled = true;

}

function loadList3(list2Value) {

var list3 = document.getElementById("list3");

var toDelete = list3.childNodes;

var tab = tab3[list2Value];

while (list3.hasChildNodes()) {

list3.removeChild(toDelete[0]);

}

if (tab) {

for (var i = 0; i < tab.length; i++) {

var item = document.createElement('option');

item.value = tab;

item.innerHTML = tab;

list3.appendChild(item);

}

list3.disabled = false;

}

else {

list3.disabled = true;

}

</script>

</head>

<body>

</form>

</body>

</html>

Thank you in advence for your help

Report · Sep 14, 2017

Apparently, no event is triggered when one clicks on the field <select id="list3">.

Report · Sep 14, 2017

No event should be trigger a list of model should appear then on submit i have all 3 info i need to find the tire size

Report · Sep 14, 2017

I don't understand what you mean. What do you wish to happen? What is actually happening?

Report · Sep 14, 2017

I uploaded it on a server Check it out

http://mesclients.ca/sitepneus/

When you choose a year all the make for that year appear in the 2nd select box when you select the make all the models should appear in the 3rd one.

Report · Sep 18, 2017

There might be an issue with the block entitled "Define the options". The Javascript events will update upon each onChange event. But it seems to me that the ColdFusion code used to define the values of tab1, tab2, tab3 will not be updated.

My suggestion is that you implement the queries, not in this CFM page, but in a function within a CFC. Then make an AJAX call to the function at this point in the Javascript, passing the selected value of year and vendor.

Report · Sep 18, 2017

I manage to make it work takes way to long to load you are right o needed to find another way so i found this tutorial

http://forta.com/blo...Related-Selects

I started playing around with the code here : http://mesclients.ca...neus/index3.cfm

It takes a while to load and then it gives me this error message :

"Error","ajp-bio-8014-exec-1371","09/18/17","13:49:48",,"Element year is undefined in ARGUMENTS. The specific sequence of files included or processed is: E:\MYPATH\sitepneus\art.cfc, line: 46 "

at cfart2ecfc931360593$funcGETART.runFunction(E:\MYPATH\sitepneus\art.cfc:46)

****************************************************

CFM Page, i kept his media / art refence for now

<!DOCTYPE html>

<body>

<table>

<tr>

<td>Select year:</td>

<td><cfselect name="mediaid"

bind="cfc:art.getMedia()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Make:</td>

<td><cfselect name="artid"

bind="cfc:art.getArt({mediaid})" /></td>

</tr>

</table>

</cfform>

</body>

</html>

**********************************************

CFC Page

SELECT DISTINCT year

FROM tx_carmodels

order by year DESC

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT vendor

FROM tx_carmodels

WHERE year = "#ARGUMENTS.year#"

order by year vendor

</cfquery>

</cfloop>

</cffunction>

</cfcomponent>

Why isnt it getting the year and why is it so long to load

Report · Sep 19, 2017

You mix bits of Ben Forta's example with your code. That makes it difficult to debug.

I shall now give you a correction of your code. I hope it answers all your questions.

CFM

<table>

<tr>

<td>Select Year:</td>

<td><cfselect name="annee"

bind="cfc:cars.getYear()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Vendor:</td>

<td><cfselect name="levendor"

bind="cfc:cars.getVendor({annee})" /></td>

</tr>

<tr>

<td>Select Model:</td>

<td><cfselect name="modele"

bind="cfc:cars.getModel({annee},{levendor})" /></td>

</tr>

</table>

</cfform>

cars.CFC

SELECT DISTINCT year

FROM carmodels

ORDER BY year

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT vendor

FROM carmodels

WHERE year = #arguments.yr#

ORDER BY vendor

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT model

FROM carmodels

WHERE year = #arguments.yr# AND vendor = '#arguments.vendor#'

ORDER BY model

</cfquery>

</cfloop>

</cffunction>

</cfcomponent>

Report · Sep 19, 2017

Hi,

it is working but I get 2 error message before it does :

http://mesclients.ca/sitepneus/index4.cfm

"Error","ajp-bio-8014-exec-1393","09/19/17","07:16:56",,"Error Executing Database Query.You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'AND vendor = ''

order by model' at line 5 The specific sequence of files included or processed is: D:\MyPATH\sitepneus\cars.cfc, line: 117 "

at cfcars2ecfc125460375$funcGETMODEL.runFunction(D:\MyPATH\sitepneus\cars.cfc:117)

"Error","ajp-bio-8014-exec-1394","09/19/17","07:16:56",,"Error Executing Database Query.You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'order by vendor' at line 7 The specific sequence of files included or processed is: D:\MyPATH\sitepneus\cars.cfc, line: 67 "

How can i fix this ?

Thank you so much

Report · Sep 19, 2017

Ideally, the queries should be referring to vendor ID and model ID. You are using the names directly, so I went with that.

Following your original post, I am assuming the table has a column named vendor. I also assuming that the column contains the names of the vendors. Correct?

Report · Sep 20, 2017

Error invoking CFC /sitepneus/cars.cfc : Internal Server Error [Enable debugging by adding 'cfdebug' to your URL parameters to see more information]

A possible cause of this error is that the CFM page is not importing or calling ColdFusion's Javascript libraries correctly. I'll assume the import is fine because it works eventually. It means you're probably not invoking the CFC correctly.

Verify that you have typed these lines correctly:

<cfselect name="annee"

bind="cfc:cars.getYear()"

bindonload="true" />

<cfselect name="levendor"

bind="cfc:cars.getVendor({annee})" />

<cfselect name="modele"

bind="cfc:cars.getModel({annee},{levendor})" />

There might also be errors in your CFC. Could you show us the code?

Report · Sep 20, 2017

Don't use 'year' as the name of a field or variable. It is a reserved word in ColdFusion, representing a function.

Report · Sep 20, 2017

Update: I tested your CFC by making the following direct calls

http://mesclients.ca/sitepneus/cars.cfc?method=getYear

http://mesclients.ca/sitepneus/cars.cfc?method=getVendor&yr=2017

http://mesclients.ca/sitepneus/cars.cfc?method=getModel&yr=2017&vendor=Nissan

I got no problems at all. So the most likely issue I can think of at the moment is the 'year' issue in my last post. Change the name to 'annee' and tell us if the problem remains.

Report · Sep 20, 2017

I changed it to annee with the same error message

"Error","ajp-bio-8014-exec-1474","09/20/17","08:15:56",,"Error Executing Database Query.You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'order by vendor' at line 7 The specific sequence of files included or processed is: D:\MyPath\sitepneus\cars.cfc, line: 67 "

at cfcars2ecfc125460375$funcGETVENDOR.runFunction(D:\MyPath\sitepneus\cars.cfc:67)

"Error","ajp-bio-8014-exec-1484","09/20/17","08:15:56",,"Error Executing Database Query.You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'AND vendor = '' order by model' at line 5 The specific sequence of files included or processed is: D:MyPath\sitepneus\cars.cfc, line: 117 "

at cfcars2ecfc125460375$funcGETMODEL.runFunction(D:\MyPath\sitepneus\cars.cfc:117)

here is the code :

CFM
****************************

<table>

<tr>

<td>Select Year :</td>

<td><cfselect name="annee"

bind="cfc:cars.getannee()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Vendor:</td>

<td><cfselect name="vendor"

bind="cfc:cars.getVendor({annee})" /></td>

</tr>

<tr>

<td>Select Model:</td>

<td><cfselect name="model"

bind="cfc:cars.getModel({annee},{vendor})" /></td>

</tr>

</table>

</cfform>

*********************************

CFC
********************************

SELECT DISTINCT annee

FROM tx_carmodels

order by annee DESC

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT vendor

FROM tx_carmodels

WHERE annee = #arguments.yr#

order by vendor

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT model

FROM tx_carmodels

WHERE annee = #arguments.yr# AND vendor = '#arguments.vendor#'

order by model

</cfquery>

</cfloop>

</cffunction>

</cfcomponent>

Thanks

Report · Sep 20, 2017

I just tryed this just in case i couldnt use vendor either same error message

CFm

*********************

<table>

<tr>

<td>Select Year :</td>

<td><cfselect name="annee"

bind="cfc:cars.getannee()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Vendor:</td>

<td><cfselect name="levendor"

bind="cfc:cars.getVendor({annee})" /></td>

</tr>

<tr>

<td>Select Model:</td>

<td><cfselect name="model"

bind="cfc:cars.getModel({annee},{levendor})" /></td>

</tr>

</table>

</cfform>

The error says

Line 67

WHERE annee = #arguments.yr#

Line 117

WHERE annee = #arguments.yr# AND vendor = '#arguments.vendor#'

Is it possible that the cfc is loading the function before its called ?

Report · Sep 20, 2017

Is it possible that the cfc is loading the function before its called ?

That is indeed possible. In fact I was thinking about something similar. I wondered whether ColdFusion is loading its Javascript libraries incorrectly.

What is your ColdFusion version? Did you change the location of any ColdFusion system files?

Report · Sep 20, 2017

CF 11

and no

Report · Sep 20, 2017

Thanks for the information. There seems to be a problem with the path. What happens when you replace cfc:cars with cfc:sitepneus.cars in each of the 3 bind attributes in the CFM?

Report · Sep 20, 2017

same thing

http://mesclients.ca/sitepneus/index4.cfm

CFM

******************************

<table>

<tr>

<td>Select Year :</td>

<td><cfselect name="annee"

bind="cfc:sitepneus.cars.getannee()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Vendor:</td>

<td><cfselect name="vendor"

bind="cfc:sitepneus.cars.getVendor({annee})" /></td>

</tr>

<tr>

<td>Select Model:</td>

<td><cfselect name="model"

bind="cfc:sitepneus.cars.getModel({annee},{vendor})" /></td>

</tr>

</table>

</cfform>

Report · Sep 20, 2017

Strange! I copied your exact code to my ColdFusion 2016 installation. I then created a MySQL database table, and filled in some values for year, vendor, model. It worked without any problems.

Let's start all over, reviewing all the evidence. My test suggests we look at ColdFusion 11 and/or at your individual setup. Combine this with the error messages you've been getting:

Line 67
WHERE annee = #arguments.yr#
Line 117
WHERE annee = #arguments.yr# AND vendor = '#arguments.vendor#'

Could it be that ColdFusion 11 is firing the last 2 functions even though there is no bindOnLoad attribute? This suggests a possible answer. Add the attribute bindOnLoad="false" to the last 2 cfselect tags:

<cfselect name="vendor"

bindOnLoad="false"

bind="cfc:sitepneus.cars.getVendor({annee})" />

<cfselect name="model"

bindOnLoad="false"

bind="cfc:sitepneus.cars.getModel({annee},{vendor})" />

Does that help?

Report · Sep 20, 2017

Forgot to tell you i alredy tryed that same error

Report · Sep 20, 2017

Next tips:

1) ensure that the annee database column is of integer type.

2) change the initialization code <cfset anneeArray[1][1]=""> to <cfset anneeArray[1][1]="0">

Report · Sep 20, 2017

You wanna cry ?

annee/year is a varchar not a numeric field its working perfecly thank you so much

WHERE annee = '#arguments.yr#' AND vendor = '#arguments.vendor#'

Now why is <cfprocessingdirective pageencoding="utf-8"> not working ?

I even tryed using &eacute ; for the é

Report · Sep 20, 2017

I am glad we solved it. Overall, this was a good exercise in debugging. Nevertheless, I would advise you to look for a jQuery alternative for interacting dropdowns.

An alternative to <cfprocessingdirective pageencoding="utf-8">:

1) Open the ColdFusion Administrator

2) Go to the Java and JVM page. Click with the mouse at the end of text content in the field JVM Arguments. Type a space, followed by -Dfile.encoding=UTF8

3) Press the button to Submit Changes

4) Restart ColdFusion

Let us know whether it works.

Report · Sep 21, 2017

Please kindly mark the correct answer. If you find none of the answers to be the correct one, you could also describe the solution then mark it as the correct answer. It will certainly help someone else in future.

Populate a select from a previous selected option

1 Correct answer