Coldfusion Populate form with dropdown selection using ajax

Question

So I have a project that\'s using ColdFusion and it has a form with a dropdown.

See example: http://jsfiddle.net/mwoods98/KXmNK/

What I need to

Answer 1

In my example, I have a set of drop downs that are tiered dependent (Coldbox 3.5+, CF9)

Using bindCFC and cfajax , here is an example of the first two drop downs the second being dependent

My view snippet

<cfform>
    <cfselect name="groups" id="groups" bind="cfc:#getSetting('AppMapping')#.model.dynform.getGroups()" 
         bindOnLoad="Yes" 
         display="group_name" 
         value="group_id" />

    <cfselect name="events" id="events" selected="#form.event_id#" 
          bind="cfc:#getSetting('AppMapping')#.model.dynform.getEventsByGroup({groups})" 
          display="event_name" 
          value="event_id" 
          queryPosition="below">
</cfform>

My model (dynform) snippet

<cffunction name="getGroups" access="remote" output="false" returntype="query"> 
    <cfset var qGroups = "">
    <cfquery datasource="#application.DSN#" name="qGroups">
       SELECT
               egc.nd_event_group_id                  group_id,
               egc.short_desc                         group_name
       FROM    event_group_code egc
       WHERE   egc.status_code = 'A'
       ORDER BY egc.sort_order
    </cfquery>
    <cfreturn qGroups>
</cffunction>

<cffunction name="getEventsByGroup" access="remote" output="false" returntype="query">
    <cfargument name="event_group_id" type="string" required="true">    
    <cfset var qEventsByGroup = "">
    <cfquery datasource="#application.DSN#" name="qEventsByGroup">
        SELECT ec.event_id,           
               ec.FULL_DESC as event_name              
        FROM   events ec
        WHERE  ec.event_group_id =  <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.event_group_id#"> 

    </cfquery>
    <cfreturn qEventsByGroup>
</cffunction>

Though the above will work, I ended up ditching it for the jQuery/ajax return JSON approach. The reasons why:

1. Coldbox way = Handlers should be doing the work, not views

2. CFajax/cfselect was slower than jQuery ajax, and with less options. (What if I want a multiple select box? Or three data attributes returned rather than two?)

3. I didn't want to use the cfform tag in my view, which cfselect requires

I can post the jQuery ajax way if needed, but I think I answered the original question

Answer 2

The easiest way to do it is with the bind attribute of cfselect. However, whether you use this method or roll your own jquery, do this:

1. Make sure your query works when it's not in a cfc.
2. Make sure your query works when it's in a cfc and you are calling it with cfinvoke or from an object.

That way, if you have any issues calling it from ajax, you'll know it's not the cfc that's at fault.

Answer 3

If you are using jQuery you can use the ajax function built into jquery to call to the CFC and return the result and populate the fields. BTW if you want to do this putting IDs on the fields will be VERY helpful.

$.ajax({
    type: 'get',
    url: 'pathToMy.cfc',
    data: {method:'getNameAddressAndNumberFromID'
        , myID : valueOfItemSelectedInDropDown
        },
    dataType: 'json',
    async: false,
    success: function(result){
         $('#myNameInput').val(result.NAME);
         $('#myNameInput').val(result.ADDRESS);
         $('#myNameInput').val(result.NUMBER);
        }
    }); 

Assume you have a CFC named 'pathToMy.cfc' with a method of 'getNameAddressAndNumberFromID' and you have an ID on the inputs like Name:

<input name="name" id="myNameInput" type="Text">

the result of the method could return the name, address and number from a query. Returning this info as JSON will be really helpful.

This should get you on the right track, good luck.