10 Replies - 3286 Views - Last Post: 18 September 2017 - 11:53 AM Rate Topic: -----

#1 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Populate a select from a previous selected option

Posted 14 September 2017 - 05:38 AM

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>

    <title>losd list test</title>

 

<CFQUERY NAME="getyear" datasource="dataname">

SELECT DISTINCT year

FROM carmodels

order by year DESC

</cfquery>

 

<cfset Start = 1>

<cfset Start2 = 1>

<cfset Start3 = 1>

<cfset End = getyear.recordcount>

 

 

<script language="javascript">

/*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*/

 

<!------  SELECT  1 ----------------->

 

function loadList1() {

 

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

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

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

        item.value = tab1[i];

        item.innerHTML = tab1[i];

      

        if (i == 0) {

            item.selected = true;

        }

      

        list1.appendChild(item);

    }

  

    if (tab1.length > 0) {

        loadList2(tab1[0]);

    }

}

 

<!------  SELECT  2 ----------------->

 

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[i];

            item.innerHTML = tab[i];

            list2.appendChild(item);

        }

        list2.disabled = false;

    }

    else {

        list2.disabled = true;

    }

}

 

 

<!------  SELECT  3 ----------------->

 

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[i];

            item.innerHTML = tab[i];

            list3.appendChild(item);

        }

        list3.disabled = false;

    }

    else {

 

        list3.disabled = true;

    }

}

 

</script>

 

    </head>

    <body>

      

<form action="search.cfm" method="post">

 

 

<script type="text/javascript">addLoadEvent(loadList1);</script><select id="list1" name="year" style="width: 180px;" onchange="loadList2(this.value);"></select>

<!---- Here i get all the years and its working --->

 

<select id="list2" name="vendor" style="width: 180px;"  onchange="loadList3(this.value);"></select>

<!---- the list3.disabled = true; is activated and the field is grey out once I select a year the vendor list appears  GREAT --->

 

<select id="list3" name="Model" style="width: 180px;"></select>

<!---- the list3.disabled = true; is not activated and once i select a vendor it stays empty and  the list3.disabled = true; comes in fonction and the field is greyed out--->

 
  <input type="submit" value="Submit">
</form>

  

    </body>

</html>





Thank you in advence for your help

This post has been edited by Craig328: 14 September 2017 - 08:29 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Populate a select from a previous selected option

#2 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 2024
  • View blog
  • Posts: 3,609
  • Joined: 13-January 08

Re: Populate a select from a previous selected option

Posted 14 September 2017 - 09:07 AM

Welcome back Gates!

So, given that the part of your code that's not performing as you like is a JS function, this is really more of a Javascript question. That said, when you describe your second function as "it doesn't work" what is it doing? Does it do anything? Are you sure it's even firing?

There are several ways to troubleshoot and debug JS functions. Personally, I use Chrome and Firefox to develop against and both have good, built in debuggers for seeing what the Javascript is doing. Without knowing what your error is, we can't really guide you in how to go about fixing your issue.

Go back and see with your browser's tools what the issue with the function is. If you're using Chrome, hit Ctrl-Shift-I to get the Developer Tools. If using FF, I prefer to use the free plugin called Firebug. Get an idea of what is happening and if the error messages don't get you started in the right direction, come back and let us know what you're seeing.

Good luck!
Was This Post Helpful? 0
  • +
  • -

#3 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 14 September 2017 - 09:56 AM

Ok i went with Chrome in console this is what i get

Uncaught SyntaxError: Unexpected token = 157

thats line 157 : <select id="list2" name="vendor" style="width: 180px;" onchange="loadList3(this.value); class="Menu"></select>
Was This Post Helpful? 0
  • +
  • -

#4 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 2024
  • View blog
  • Posts: 3,609
  • Joined: 13-January 08

Re: Populate a select from a previous selected option

Posted 14 September 2017 - 12:11 PM

No, that's not looking accurate to me. That is CF and won't throw a JS error. My guess is that it might have something to do with the single and double quotes for the CF code you have running inside the script tags. Javascript can be finicky about quotes and in much of the case there, you're using quotes for the CF code that you don't strictly need.

Maybe see if there's a way you build a struct outside of the script tags to hold the info you're using to build the select option arrays.
Was This Post Helpful? 0
  • +
  • -

#5 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 05:07 AM

The thing is it works well mostly

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.
Was This Post Helpful? 0
  • +
  • -

#6 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 2024
  • View blog
  • Posts: 3,609
  • Joined: 13-January 08

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 05:40 AM

Ah! I see it.

You were correct about the line that's erroring (so my apologies for earlier). Your onchange attribute in the select tag isn't closed (no closing "). Add those double quotes after the semicolon and before the class attribute and see what you get.
Was This Post Helpful? 0
  • +
  • -

#7 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 06:54 AM

Wow i miss that one thanks its still not working and i'm not getting any JS error message so now i'm guessing its in my coldfusion query ?
Was This Post Helpful? 0
  • +
  • -

#8 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 07:09 AM

View PostGates, on 15 September 2017 - 06:54 AM, said:

Wow i miss that one thanks its still not working and i'm not getting any JS error message so now i'm guessing its in my coldfusion query ?


I change my query from
SELECT DISTINCT model FROM tx_carmodels WHERE vendor = '#levendor#' AND year = #lannee# ORDER by model
to
SELECT DISTINCT model FROM tx_carmodels WHERE vendor = 'hyundai' AND year = 2010 ORDER by model

Still doesnt work so the problem is not there :(
Was This Post Helpful? 0
  • +
  • -

#9 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 2024
  • View blog
  • Posts: 3,609
  • Joined: 13-January 08

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 07:20 AM

So, if you do a view source on that URL you posted earlier with your example, you'll see this:

var tab3 = new Array();
tab3["vendor"] = new Array("Modčle");
tab3["Jeep"] = new Array("Tous" , "Accent");



My guess is that your logic for building the tab3 array is flawed. That said, now that I'm seeing what you're doing, have you considered perhaps trying to do this with jQuery (and are you familiar with jQuery)?
Was This Post Helpful? 0
  • +
  • -

#10 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 15 September 2017 - 10:28 AM

No not familiar with Jquery
Was This Post Helpful? 0
  • +
  • -

#11 Gates  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 13
  • Joined: 31-March 17

Re: Populate a select from a previous selected option

Posted 18 September 2017 - 11:53 AM

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(D:\home\mesclients.ca\wwwroot\sitepneus\art.cfc:46)

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

<!DOCTYPE html>
<head><title>Test page </title></head>
<body>

<cfform>
<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

<cfcomponent output="false">

<cfset THIS.dsn="mydns">

<!--- Get array of media types --->
<cffunction name="getMedia" access="remote" returnType="array">
<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->

<CFQUERY NAME="data" datasource="#THIS.dsn#">
SELECT DISTINCT year
FROM tx_carmodels
order by year DESC
</cfquery>


<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][2]=data.year[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>

<!--- Get art by media type --->
<cffunction name="getArt" access="remote" returnType="array">
<cfargument name="mediaid" required="true">

<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->


<CFQUERY NAME="data" datasource="#THIS.dsn#">
SELECT DISTINCT vendor
FROM tx_carmodels
WHERE year = "#ARGUMENTS.year#"
order by year vendor
</cfquery>


<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][2]=data.vendor[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>

</cfcomponent>


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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1