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

score 3 · Accepted Answer · answered May 01 '13 at 22:14

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.

answered May 01 '13 at 22:14

Lance

3,193
2
32
49

Thanks I'll give this a shot tomorrow! – weggie May 02 '13 at 01:24
thats a good sample. thats the way I do it. However, you may want to show a sample of what the "pathtoMycfc" output would look like with the json formatting. – steve May 02 '13 at 03:15
It all depends on how the cfc is built. Personally I use Ben Nadel's QueryToArrays function, which can be found at http://www.bennadel.com/blog/124-Ask-Ben-Converting-a-Query-to-an-Array.htm. Looking at this post may be helpful http://stackoverflow.com/questions/14149398/how-can-i-use-angularjs-and-a-serializejson-cfquery/14162635#14162635 – Lance May 02 '13 at 15:56
Thanks both examples here helped out. I'm a bit closer but still not getting the result. I'll be asking another question. I'll post the link here for follow up. Thanks for answering. – weggie May 06 '13 at 18:42

score 2 · Answer 2 · edited May 02 '13 at 17:53

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:

Coldbox way = Handlers should be doing the work, not views
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?)
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

score 0 · Answer 3 · answered May 01 '13 at 22:47

0

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:

Make sure your query works when it's not in a cfc.
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.

answered May 01 '13 at 22:47

Dan Bracuk

20,699
4
26
43

Thanks for he answer. I have been trying to stay away from the binding but I might have to look at it if the jquery option doesn't work. Thanks for the answer. – weggie May 02 '13 at 01:24

Coldfusion Populate form with dropdown selection using ajax

3 Answers3

Linked