【问题标题】:Unable to pass an ID variable to a CFC that displays the correct record in a Modal Box无法将 ID 变量传递给在模式框中显示正确记录的 CFC
【发布时间】:2026-02-09 16:15:02
【问题描述】:

我正在尝试显示应根据编辑按钮的 ID 填充的表单。所以我正在采取的程序如下:

  1. 选择带有 ID 的编辑按钮
  2. Bootstrap 模态框显示
  3. 在框中显示表单
  4. 根据 ID 选择显示记录

在尝试以多种方式执行此操作(包括创建带有表单标签和隐藏输入的按钮)后,我无法在模态框中显示正确的记录。目前,它显示第一条记录,但不显示我正在使用编辑按钮查找的记录。代码如下。如果有人可以帮助我解决这个问题,请提前感谢。

<cffunction name="GetOrganizationByID" access="public" returntype="query" output="false" hint="gets one organization by its ID.">
    <cfargument name="OrgID" type="any" required="true" default="">
        <cfset var Org = "" />
        <cftry>
            <cfquery datasource = "#application.dsn.name#" name="Org">
                        SELECT  org.nID,
                                org.nSuperOrg,
                                org.nOrgRefID,
                                org.cOrgRefID,
                                org.nActive,
                                org.cName AS cOrgName,
                                orginfo.cPhone,
                                orginfo.cPhoneExt,
                                orginfo.cFax,
                                org.nAvailable,
                                orginfo.cAddress1,
                                orginfo.cAddress2,
                                orginfo.cCity,
                                orginfo.cState,
                                orginfo.cZip,
                                orginfo.cCountry,
                                orginfo.cWebSite
                    from    Organizations org
                            left join Organization_Info orginfo
                                on org.nID = orginfo.nOrganizationID
                    where   org.nID = <cfqueryparam cfsqltype="cf_sql_integer" value="#Arguments.orgID#">
            </cfquery>
            <cfreturn local.Org>
            <cfcatch>

按钮:

<td><a href="##" role="button" data-id="#AllOrgs.nid#" id="loadID" class="btn btn-primary btn-sm pull-right" data-toggle="modal" data-target="##edit-org">Edit</a>

JQuery:

<script>
$(document).ready(function() {
    $("#loadID").click(function(e) {
        var id=$(this).data('id');
        e.preventDefault();
        var recordata = $(this).attr("href").substring(1); //trim '?' char
        $.ajax({
            type: "Post",
            url: "/pathtoCFC/Organizations.cfc?method=GetOrganizationByID",
            data: recordata,
            dataType: "html",
            success: function(message) {
                $("#content").html(message);
            }
        });
    });
});

模态框:

<div id="edit-org" class="modal container hide fade" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
            </button>
            <h3>
                Edit Organization Info
            </h3>
        </div>
        <div class="modal-body">
            <section id="my-account-security-form" class="page container">
                <form id="EditOrgForm" class="form-horizontal" action="#cgi.SCRIPT_NAME#?app=edit&view=newOrganization" method="post">
                    <!--- <div class="container">
                        <div class="alert alert-block alert-info">
                            <p>
                                Enter updated security information for your account as desired. Fields marked with an asterisk are required.
                            </p>
                        </div> --->
                        <div class="row">
                            <div class="span7">
                                <fieldset>
                                    <!--- <legend>
                                        Add User Info
                                    </legend> --->
                                    <br>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Organization Name
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <input  name="orgname" class="span4" type="text" value="#AllOrgs.cOrgName#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Address
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <input id="new-pass-verify-control" name="address" class="span4" type="text" value="#AllOrgs.cAddress1#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Address 2
                                        </label>
                                        <div class="controls">
                                            <input  name="address2" class="span4" type="text" value="#AllOrgs.cAddress2#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            City
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <input  name="city" class="span4" type="text" value="#AllOrgs.cCity#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="challengeQuestion" class="control-label">
                                            State
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <select id="challenge_question_control" name="state" class="btn-sm">
                                                <option value="#iif(Allstates.RecordCount,DE('#Allstates.stateid#'),de(''))#"
                                                    <cfif isDefined('Allstates.stateid')>
                                                        selected="true"
                                                    </cfif>
                                                    >#iif(Allstates.RecordCount,DE('#Allstates.StateName#'),de('---Select State---'))#</option>
                                                <cfloop query="Allstates">
                                                <option value="#stateID#">
                                                    #StateName#
                                                </option>
                                                </cfloop>
                                            </select>
                                        </div>
                                    </div>

                                </fieldset>
                            </div>
                            <div id="acct-verify-row" class="span9">
                                <fieldset>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Zip Code
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <input  name="zipcode" class="input-small" type="text" value="#AllOrgs.cZip#" maxlength="5" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="challengeQuestion" class="control-label">
                                            Country
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <select id="challenge_question_control" name="Country" class="btn-sm">
                                                <option value="#iif(AllCountries.RecordCount,DE('#AllCountries.countryid#'),de(''))#"
                                                    <cfif isDefined('AllCountries.countryid')>
                                                        selected="true"
                                                    </cfif>
                                                    >#iif(AllCountries.RecordCount,DE('#AllCountries.CountryName#'),de('---Select Country---'))#</option>
                                                <cfloop query="AllCountries">
                                                    <option value="#CountryCode#">#CountryName#</option>
                                                </cfloop>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Fax
                                        </label>
                                        <div class="controls">
                                            <input  name="fax" class="span4" type="text" value="#AllOrgs.cFax#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Website (URL)
                                        </label>
                                        <div class="controls">
                                            <input  name="webUrl" class="span4" type="text" value="#AllOrgs.cWebsite#" maxlength="150" autocomplete="false" placeholder="http://www.yoursite.com">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            Phone Number
                                            <span class="required">
                                                *
                                            </span>
                                        </label>
                                        <div class="controls">
                                            <input  name="phone" class="span4" type="text" value="#AllOrgs.cPhone#" autocomplete="false">
                                        </div>
                                    </div>
                                    <div class="control-group ">
                                        <label class="control-label">
                                            EXT
                                        </label>
                                        <div class="controls">
                                            <input  name="phoneext" class="input-small" type="text" value="#AllOrgs.cPhoneExt#" maxlength="8" autocomplete="false">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <footer id="submit-actions" class="form-actions">
                            <button id="submit-button" type="submit" class="btn btn-primary" name="action"  value="CONFIRM">
                                Save
                            </button>
                            <button type="button" data-dismiss="modal" class="btn" value="CANCEL">
                                Cancel
                            </button>
                        </footer>
                    </div>
                </form>
            </section>
        </div>
        <div class="modal-footer">
            <!--- <button type="button" data-dismiss="modal" class="btn">
                Close
            </button> --->
            <!--- <button type="button" class="btn btn-primary">
                Save changes
                </button> --->
        </div>
    </div>
</div>

【问题讨论】:

  • 在 ajax 调用之前,您的 JavaScript recordata 变量包含什么?看起来你在这里设置了一个 id 变量 var id=$(this).data('id'); 但是你在哪里将它传递给你的 cfc?
  • 是的,我应该将它传递给 CFC,但是我可能做错了。老实说,对 Jquery 来说相当新。因此,当我将 ID 传递给 GetOrganizationByID 方法时,查询应该只发回该行数据,然后使用所需记录填充模态框表单。此外,我试图创建所有信息并以这种方式填充的记录数据,但这也不起作用。可能需要把它拿出来。
  • 消除过程。首先通过创建一个联系该 CFC 对象/调用任何内容的简单页面来排除您的对象,并查看您是否可以传入您的 OrgID 参数并返回“stuff”。看看返回的“东西”是否符合您的期望。一旦完成,然后处理javascript。如果您确信任何一个代码片段都没有问题,那么它必须是缓存。我愿意承认这种情况发生的次数更多。点燃浏览器中缓存的所有内容,或打开 Firefox、IE 或其他从未接触过该页面的内容并检查结果。
  • 查询应该只发回那行数据好吧,不要只是相信它 :) 正如弗兰克上面描述的那样,您需要分别测试每个部分并实际验证各个部分都在做他们“应该做的”。从头开始(查询)并向后工作(jquery),直到查明问题的根源。一旦你知道“哪里”出了问题,就只需要修复它。
  • 我完全理解,但是,由于我对 jQuery 还很陌生,你怎么知道 Jquery 是否在做它的事情。当我查看 DOM 时,似乎没有错误,所以我无法判断它是否存在。

标签: jquery twitter-bootstrap coldfusion


【解决方案1】:

对于 jquery ajax 请求,您应该将 data 参数设置为包含您要发布的每个值的属性的对象。

data:  { "parameter" : "value" },

将被表单范围(form.parameter)下的 .cfm 页面拾取 并在 cfc 远程方法调用中作为参数(cfc 远程参数也可以在查询字符串中传递)

此代码中的一个问题是没有传递 OrgID 参数。

尝试换行

var recordata = $(this).attr("href").substring(1); //trim '?' char

var recordata = { "OrgID" : id };

另一个问题可能是 cfc 函数在本地范围 (local.Org) 中返回一个变量,但查询名称在变量(默认)范围内 (name="Org") 如果您运行的是较旧的CF的版本

<cfset var local = StructNew() />
...
<cfquery datasource = "#application.dsn.name#" name="local.Org">

或者如果您运行的是更新版本(CF 9 或更高版本),则无需创建本地结构

【讨论】:

  • 我已经对我的代码进行了必要的更改,但是我仍然无法将查询的值放入模式框中。换句话说,表单应该将查询传回的数据返回到 Modal 框中。
  • 好吧,* 不会为您编写整个页面。哈哈。现在,您的查询将获取从 cfc 返回的内容,并将其显示在 html 元素中,id 为“content”