Coldfusion使用ajax通过下拉选择填充表单

Coldfusion Populate form with dropdown selection using ajax

本文关键字：选择 填充 表单 使用 ajax Coldfusion      更新时间：2023-09-26

我有一个使用ColdFusion的项目它有一个带有下拉菜单的表单

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

我需要发生的是，一旦下拉菜单被选中，是一个ajax调用调用ColdFusion cfc，返回信息来填写下拉菜单下的表单。

以上面的小提琴为例，如果用户选择"2"，那么名称字段将包含Bob、202 Fake Street和111-555-1234。如果他们选择"3"，他们将得到从CFC(数据库)返回的任何其他值。

CFC将有一个方法调用，该方法调用将根据通过下拉列表提交的数字的值获取信息。

如有任何帮助，不胜感激。

谢谢

如果你正在使用jQuery，你可以使用jQuery内置的ajax函数来调用CFC并返回结果并填充字段。顺便说一句，如果你想这样做，在字段上添加id将非常有用。

$.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);
        }
    });

假设有一个名为"pathToMy"的CFC。cfc'与'getNameAddressAndNumberFromID'的方法，你有一个ID的输入，如名称:

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

方法的结果可以返回查询的名称、地址和号码。将此信息以JSON形式返回将非常有用。

这应该会让你走上正轨，祝你好运。

在我的例子中，我有一组分层依赖的下拉菜单(Coldbox 3.5+， CF9)

使用bindCFC和cfajax，下面是前两个下拉列表的示例，第二个是依赖的

我的视图片段 

<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>

虽然上面的方法可以工作，但我最终放弃了jQuery/ajax返回JSON方法。原因:

  1. Coldbox way =处理程序应该做的工作，而不是视图

  2. cfaajax/cfselect比jQuery ajax慢，而且选项更少。(如果我想要一个多重选择框怎么办?还是返回三个数据属性而不是两个?)

  3. 我不想在我的视图中使用cfform标签，cfselect需要

我可以张贴jQuery ajax的方式，如果需要的话，但我认为我回答了原来的问题

最简单的方法是使用cfselect的bind属性。但是，无论您是使用此方法还是使用自己的jquery，都要这样做:

  1. 确保你的查询工作时，它不是在一个cfc。
  2. 确保你的查询工作时，它在一个cfc，你正在调用它与cfinvoke或从一个对象。

这样，如果你从ajax调用它有任何问题，你会知道这不是cfc的问题。

相关文章：