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 happen once the dropdown is selected, is for an ajax call to call a ColdFusion cfc that returns information to fill in the form that's under the dropdown.

Using the fiddle above as an example, if the user selected "2" then the name field would have Bob, 202 Fake Street and 111-555-1234. If they selected "3" they would get whatever else is returned from the CFC (database).

The CFC would just have a method call that would grab information based off of the value of the number submitted via the dropdown.

Any help would be appreciated.

Thanks

Answer 1

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.

Answer 2

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 3

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.