我正在尝试显示一个应根据编辑按钮中的 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>
最佳答案
对于 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 或更高版本)，则无需创建本地结构
关于jquery - 无法将 ID 变量传递到在模态框中显示正确记录的 CFC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29168380/