Dynamic Drop Down List in ColdFusion 9

0
votes

Alright so people were not understanding clearly my question, so I removed the url where there was a question already asked by someone else and there I didn't got the perfect answer..

So here is the Question........

I am looking to code a dynamic drop down list within ColdFusion. What I want is the drop down list to be populated by the above drop down list (example: Select Province (B.C) will populate the City drop down list with all cities within that Province). Province data will be collected from a ColdFusion query and same with the city's data.

Please, No JavaScript, No AJAX, No ColdFusion CFCs, Nothing more than or less than some ColdFusion Tags... :( The logic code should be in one .cfm file itself.

  • Edit -

@Charles Higgins

Can't seem to make it work. It's throwing "Error invoking CFC BinFcns.cfc : Internal Server Error" "Please tell me where I'm doing it wrong, here is the code..

This one is 'index.cfm'

<cfquery name="qstates" datasource="info">
  SELECT states
  FROM info

  GROUP BY states
</cfquery> 
<html> 
<head> 
</head> 
<body> 
<cfform>
<cfselect name="DropDown1" bind="cfc:BinFcns.Method({DropDown1})">
    <cfoutput query="qstates"><option>#states#</option></cfoutput>
</cfselect>
<cfselect name="DropDown2" bind="cfc:BinFcns.Method({DropDown1})" /> 
</cfform>
</body> 
</html>

and this one is the .cfc, 'BinFcns.cfc'

<cfcomponent output="true">
   <!--- set function name --->
   <cffunction name="Method" access="remote" returnType="array">
    <!--- this is what you passed to the CFC via the {} think in the select --->
      <cfargument name="Selected" type="numeric" required="true">
      <!--- Define array to produce the drop down --->
      <cfset var data="">
      <cfset var result=ArrayNew(2)>
      <cfset var i=0>
      <!--- Get data --->
      <cfquery name="data" datasource="info">
      SELECT *
      FROM info
      Order by cities
      </cfquery> 
      <!--- Convert results to array --->
      <cfloop index="i" from="1" to="#data.RecordCount#">
             <cfset result[i][1]=data.DropDownID[i]>
             <cfset result[i][2]='#DropDownTEXT#'>      
             <!--- determine which is selected via what you passed and something in the database --->
            <cfif data.DropDownID[i] eq #Selected#>
                <cfset result[i][3]=true>
            </cfif>
      </cfloop>

      <!--- And return it --->
      <cfreturn result>
   </cffunction>
</cfcomponent>
5
htmlcoldfusioncoldfusion-9cascadingdropdown

5 Answers

1
votes

Your CFC Its not complicated, trust me learn its the best option, I have not tested this code but it should be close to working.. just fugly like most of my code.

<cfcomponent output="false">
   <!--- set function name --->
   <cffunction name="Method" access="public" returnType="array">
    <!--- this is what you passed to the CFC via the {} think in the select --->
      <cfargument name="Selected" type="numeric" required="true">
      <!--- Define array to produce the drop down --->
      <cfset var data="">
      <cfset var result=ArrayNew(2)>
      <cfset var i=0>
      <!--- Get data --->
      <cfquery name="data" datasource="#THIS.dsn#">
      SELECT *
      FROM 2ndDropDownData
      Order by DataName
      </cfquery> 
      <!--- Convert results to array --->
      <cfloop index="i" from="1" to="#data.RecordCount#">
             <cfset result[i][1]=data.DropDownID[i]>
             <cfset result[i][2]='#DropDownTEXT#'>      
             <!--- determine which is selected via what you passed and something in the database --->
            <cfif data.DropDownID[i] eq #Selected#>
                <cfset result[i][3]=true>
            </cfif>
      </cfloop>

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

The CFM SIMPLE!

A drop down called DropDown1, then you pass that to the cfc via the following code for drop down 2

<cfselect name="DropDown2" bind="cfc:cfcname.Method({DropDown1})" />

Its that simple... two drop downs, with the second one calling the CFC.. Worth learning.

You can use Bindonload, on the 2nd to preselect if required.

Anyway hope that stops you being scared of CFCs.. they are very usefull.

0
votes

I usually just write my own AJAX call with jQuery so I'm not too familiar with ColdFusion's data binding. The CFC / NOT CFC concept is the same really. You're requesting data from the server, if you used a .cfm file or a .cfc to return the data your code would be very similar.

from CFSelect Docs, The return must be:

  • A two-dimensional array, where the first element in each array row is the option value and the second element in the row is the text to display in the option list.
  • If the bind specifies a CFC function, a query, or, if the bind specifies a URL, a JSON representation of a query. The query must include columns whose names are the values of the cfselect tag value and display attributes. Although you can return additional columns, you cannot use them in your client-side code. When you call a CFC function, you do not have to convert the query to JSON format yourself; ColdFusion automatically does the conversion. To use this format, you must specify a value attribute. If you omit the display attribute, you must have only a single column in the query that contains the values; the values are also used as the displayed text.

From Binding data to form fields:

Using bind expressions To specify a bind expression, use one of the following formats:

  • cfc:componentPath.functionName(parameters) Note: The component path cannot use a mapping. The componentPath value must be a dot-delimited path from the web root or the directory that contains the current page.
  • javascript:functionName(parameters)
  • url:URL?parameters
  • URL?parameters
  • A string containing one or more instances of {bind parameter}, such as {firstname}.{lastname}@{domain}
0
votes

I am sure some people will scream in horror, but here is something I used to do as a newbie if you want a dynamic select.

Query the Table, to get values

<cfquery datasource="xy" name="get">
 Select *
 From Data
</cfquery>

Just stick the output inside the select, and if you want to be cocky use a CFIF to determine which bit you are viewing. You do not need to use CFSELECT, select can do.

<cfselect name="select">
  <cfoutput query="get">
    <option value="#URLTAKENFROMDATABASE#"
    <cfif #CGI.SCRIPT_NAME# eq '#URLTAKENFROMDATABASE#'>selected</cfif>
     >#LINKNAME#</option
  </cfoutput>
</cfselect>

You can Group your query or your output to stick in sub headers within the drop down for example something like

<cfoutput query"get" group="SECTIONA">
  <option value="">#SECTIONA#</option>
      <cfoutput>
        <option value="#URLTAKENFROMDATABASE#"
        <cfif #CGI.SCRIPT_NAME# eq '#URLTAKENFROMDATABASE#'>selected</cfif>
         >#LINKNAME#</option
      </cfoutput>   
</cfouput>
0
votes

At the top of your page you could write a cfquery that would hit your database and retrieve the data. Then inside the page you can utilize the cfselect tag with its query attribute and this should populate the select box with values pulled from your cfquery.

This will allow your to quickly generate pages but it's not very reusable and is generally considered poor practice. I tend to stay away from any of the cfselect,cfform, etc tags. I also add my cfquery to a central .cfc file so they can be accessed throughout the site. This will save you time when the query changes and you are hunting throughout the site for where you made that specific call.

Anyway hope this helps, if you have any questions fire away!

---Edit---

In response to your updated question. You could have two cfquery tags on your page. One would fire on the first load of the page and populate the Province list. Upon selection this would submit a form and set a URL variable. You could then pass that variable to your second cfquery that would then populate the City list. The code sample provided by the user above me would work in this regard.

Again hope this helps, if you want specific code I can provide it but that logic should get you going on the right path.

0
votes

First, you can have your first dropdown bind to a cfc or populated from a query on your page, but not both. Either method will work, pick one.

Next, your Method function in your cfc has an argument but doesn't use it properly. Your cfquery should use it in the where clause. Also, don't try to pre-select any city. It doesn't make sense in the context of cascading selects.