Skip to main content
B
BACFL
Inspiring
January 27, 2019
Answered

Code is not working for a 2nd select box populating based on selection in the first select box

  • January 27, 2019
  • 3 replies
  • 1339 views

I want to have the first select box display vehicle makes (this part is working) and then have the second select box display related vehicle models based on the model selected in the first select box.

I've researched this and based my code on answers I have found in the forum, however the second select box is not working.

Following is my code:

The CFC:

<cfcomponent output="false">

  

    <cffunction name="getProduct" access="remote" returnType="query">

        <cfset var data="" />

           <cfquery datasource="xxxxxxx" name="data">

SELECT  makeid, make

FROM makesfinal

ORDER by make

</cfquery>

        <cfreturn data>

       

       

         <!--- Convert results to array --->

        <cfloop index="i" from="1" to="#data.RecordCount#">

            <cfset result[1]=data.makeid>

            <cfset result[2]=data.make>

        </cfloop>

        <!--- And return it --->

        <cfreturn data>

       

       

    </cffunction>

  

    <cffunction name="getSubProduct" access="remote" returnType="query">

        <cfargument name="makeid" type="any" required="true">

        <cfset var data="" />

       <cfquery datasource="xxxxxxxxxx" name="data">

        SELECT modelid, model,makeid

        FROM modelsfinal

        WHERE makeid = '#ARGUMENTS.makeid#'

        ORDER BY model

        </cfquery>

       

       

         <cfloop index="i" from="1" to="#data.RecordCount#">

            <cfset result[1]=data.modelid>

            <cfset result[2]=data.model>

        </cfloop>

       

        <cfreturn data>

    </cffunction>

  

</cfcomponent>

The Select Code:

<cfselect

    name="Product"

    bind="cfc:makemodel2.getProduct()"

    style="width:387px;"

    size="1"

    multiple="No"

    required="No"

    display="make"

    value="makeid"

    bindonLoad="True">

</cfselect>

<cfselect

    name="Sub Product"

    bind="cfc:makemodel2.getSubProduct({makeid})"

    style="width:387px;"

    size="1"

    multiple="No"

    required="No"

    display="model"

    value="Modelid">

</cfselect>

Thanks for your help.

    This topic has been closed for replies.
    Correct answer BKBK

    I didn't say you should change the name of the function. Leave the functions getProduct and getSubProduct intact. These are the names of functions in Makemodel2.cfc.

    There are 3 things.

    1) Make sure that the name of the first select field, for example makeid or product, matches the value that you pass in the bind of the second select field.

    2) Display and value are not necessary as required attributes. What you may need are default values for the select fields. To get them, do this in the CFC:

    !--- Values for the first select option --->

    var result=arrayNew(2)>

    <cfset result[1][1]="">

    <cfset result[1][2]="Select make">

    <cfloop query="data">

    <cfset result[currentrow+1][1]=data.makeId>

    <cfset result[currentrow+1][2]=data.make>

    </cfloop>

    <!--- Values for the first select option --->

    var result2=arrayNew(2)>

    <cfset result2[1][1]="">

    <cfset result2[1][2]="Select model">

    <cfloop query="data">

    <cfset result2[currentrow+1][1]=data.modelId>

    <cfset result2[currentrow+1][2]=data.model>

    </cfloop>

    3) In the functions use <cfreturn result>, <cfreturn result2>, respectively.

    3 replies

    WolfShade
    WolfShade
    Legend
    January 28, 2019

    In your first function, you are returning the query before you put it into an array.  The act of creating and populating the array then returning the array isn't being triggered because the first cfreturn data stops all processing after it.

    Also, in the second function you are declaring the returntype as query, but returning an array.  That, alone, should trigger error messages.

    Besides that, and I hate to bring this up, but CFFORM and related elements should not be used.  Adobe is sticking to outdated Ext.js and other libraries.  You're better off using plain JavaScript or jQuery and a CSS library like Bootstrap, and coding manually for the bindings.

    HTH,

    ^ _ ^

    UPDATE: I just noticed that you are creating an array called "result" but returning "data".  How confusing.

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    January 28, 2019

    I would remove the value and display and change the name of the first select to makeid:

    <cfselect

        name="makeid"

        bind="cfc:makemodel2.getProduct()"

        style="width:387px;"

        size="1"

        multiple="No"

        required="No"

        bindonLoad="True">

    </cfselect>

    <cfselect

        name="SubProduct"

        bind="cfc:makemodel2.getSubProduct({makeid})"

        style="width:387px;"

        size="1"

        multiple="No"

        required="No">

    </cfselect>

    Alternatively,

    <cfselect

        name="product"

        bind="cfc:makemodel2.getProduct()"

        style="width:387px;"

        size="1"

        multiple="No"

        required="No"

        bindonLoad="True">

    </cfselect>

    <cfselect

        name="SubProduct"

        bind="cfc:makemodel2.getSubProduct({product})"

        style="width:387px;"

        size="1"

        multiple="No"

        required="No">

    </cfselect>

      B
      BACFLAuthor
      Inspiring
      January 28, 2019

      BKBK,

      I removed the display and value attributes but there was an error that those are necessary, which makes sense.

      I also changed getproduct to makeid and that caused an error as well.

      Any other thoughts?

      Thanks.

      BKBK
      Community Expert
      BKBKCommunity ExpertCorrect answer
      Community Expert
      January 29, 2019

      I didn't say you should change the name of the function. Leave the functions getProduct and getSubProduct intact. These are the names of functions in Makemodel2.cfc.

      There are 3 things.

      1) Make sure that the name of the first select field, for example makeid or product, matches the value that you pass in the bind of the second select field.

      2) Display and value are not necessary as required attributes. What you may need are default values for the select fields. To get them, do this in the CFC:

      !--- Values for the first select option --->

      var result=arrayNew(2)>

      <cfset result[1][1]="">

      <cfset result[1][2]="Select make">

      <cfloop query="data">

      <cfset result[currentrow+1][1]=data.makeId>

      <cfset result[currentrow+1][2]=data.make>

      </cfloop>

      <!--- Values for the first select option --->

      var result2=arrayNew(2)>

      <cfset result2[1][1]="">

      <cfset result2[1][2]="Select model">

      <cfloop query="data">

      <cfset result2[currentrow+1][1]=data.modelId>

      <cfset result2[currentrow+1][2]=data.model>

      </cfloop>

      3) In the functions use <cfreturn result>, <cfreturn result2>, respectively.

        D
        Community Expert
        Dave WattsCommunity Expert
        Community Expert
        January 28, 2019

        I'm not all that knowledgeable about using the BIND attribute of CFSELECT. But I do see a potential problem here. What exactly is supposed to cause the second CFSELECT to trigger the CFC call? Your first CFSELECT has a name of Product; changing that isn't going to cause the second one to fire.

        Dave Watts, Eidolon LLC

        Dave Watts, Eidolon LLC
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices