【问题标题】:Coldfusion Populate form with dropdown selection using ajaxColdfusion 使用 ajax 使用下拉选择填充表单
【发布时间】:2013-04-25 23:27:35
【问题描述】:

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

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

选择下拉列表后,我需要做的就是通过 ajax 调用来调用 ColdFusion cfc,该 CFC 返回信息以填写下拉列表下的表单。

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

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

任何帮助将不胜感激。

谢谢

【问题讨论】:

    标签: javascript ajax dom coldfusion coldbox


    【解决方案1】:

    如果您使用 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 返回将非常有帮助。

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

    【讨论】:

    • 谢谢,我明天试试!
    • 这是一个很好的示例。我就是这样做的。但是,您可能希望展示一个示例,说明“pathtoMycfc”输出在 json 格式下的样子。
    • 这完全取决于 cfc 的构建方式。我个人使用 Ben Nadel 的 QueryToArrays 函数,可以在 bennadel.com/blog/… 找到。看看这篇文章可能会有所帮助stackoverflow.com/questions/14149398/…
    • 感谢这两个例子的帮助。我有点接近,但仍然没有得到结果。我会问另一个问题。我将在此处发布链接以进行跟进。感谢您的回答。
    【解决方案2】:

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

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

    我的观点sn-p

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

    我的模型(dynform)sn-p

    <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 方式 = 处理程序应该做的工作,而不是视图

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

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

    如果需要,我可以发布 jQuery ajax 方式,但我想我回答了原始问题

    【讨论】:

      【解决方案3】:

      最简单的方法是使用 cfselect 的 bind 属性。但是,无论您使用此方法还是滚动自己的 jquery,都请执行以下操作:

      1. 确保您的查询在不在 cfc 中时有效。
      2. 确保您的查询在 cfc 中有效并且您使用 cfinvoke 或从对象调用它。

      这样,如果您在从 ajax 调用它时遇到任何问题,您就会知道不是 cfc 有问题。

      【讨论】:

      • 感谢他的回答。我一直试图远离绑定,但如果 jquery 选项不起作用,我可能不得不查看它。感谢您的回答。
      猜你喜欢
      • 2013-05-18
      • 2015-08-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-06
      相关资源
      最近更新 更多