【发布时间】:2026-02-09 16:15:02
【问题描述】:
我正在尝试显示应根据编辑按钮的 ID 填充的表单。所以我正在采取的程序如下:
- 选择带有 ID 的编辑按钮
- Bootstrap 模态框显示
- 在框中显示表单
- 根据 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