问题描述
我正在使用jquery自动完成功能来从Coldfusion CFC中获取数据,并在用户键入内容时显示匹配的数据。
该部分正在工作,但是我想禁用“提交”按钮,并在消息返回时显示一条消息,因为这告诉我该数据不是唯一的,它必须是唯一的。
我可以使其工作,但是一旦我的消息出现“名称必须是唯一的”并且按钮被禁用,它就不会重新启用并将该消息更改为“名称是唯一的”。
我在做什么错了?
这是我的CFC:
<cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />
<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>
<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>
<cfif #data.recordcount# eq 0>
<!--- Build result array --->
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = 'No results'/>
<cfset titleStruct['label'] = 'No results' />
<cfset arrayAppend(returnArray,titleStruct) />
<!--- And return it --->
<cfreturn returnArray />
<cfelse>
<!--- Build result array --->
<cfloop query="data">
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = company_name/>
<cfset titleStruct['label'] = company_name />
<cfset arrayAppend(returnArray,titleStruct) />
</cfloop>
<!--- And return it --->
<cfreturn returnArray />
</cfif>
</cffunction>
这是我的Javascript:
<!---Autocomplete for customer name--->
<script>
$(document).ready(function() {
$( "#new_customer_name" ).autocomplete({
source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",minLength: 1,select: function(event,ui) {
$('#new_customer_name').val(ui.item.value);
},response: function(event,ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length == 0) {
$("#empty-message").text( "" );
//$("#empty-message").text( "Name is Unique" );
$("#add_new_customer_btn").prop('disabled',False);
} else if (ui.content.length != 0) {
$("#empty-message").text( "Name MUST BE Unique" );
$("#add_new_customer_btn").prop('disabled',true);
}
}
});
});
</script>
这是我的表格:
<!--- New customer modal --->
<div id="new-customer-modal" style="display:none; width:50%; padding:10px;">
<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name"><br><br>
<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*">
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15">
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*">
<br><br>
<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>
解决方法
我最终能够弄清楚我自己。我创建了一个单独的函数来检查在字段中输入的名称。最大的区别是返回一个字符串而不是查询,并以此方式测试输出。
在该函数中,我包含了一个if语句,以根据结果执行任务。我还创建了另一个CFC函数,专门用于根据输入的内容查询数据库。
希望这对某人有帮助。
这是我的JavaScript:
<script>
$(document).ready(function() {
$( "#new_customer_name" ).autocomplete({
source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",minLength: 1,select: function(event,ui) {
$('#new_customer_name').val(ui.item.value);
},response: function(event,ui) {
}
});
});
</script>
<script>
function check_customer_name() {
<!--- Get customer name --->
$.ajax({
dataType: 'json',data: {
check_customer_name: $('#new_customer_name').val()
},url: "cfcs/existing_customers_lookup.cfc?method=checkCustomers&returnformat=json",beforeSend: function(){
$('.loader').show();
},complete: function(){
$('.loader').hide(3000);
},success: function(response) {
// ui.content is the array that's about to be sent to the response callback.
console.log(response);
if ( response == 'unique') {
document.getElementById("empty-message").style.color = 'green';
document.getElementById('empty-message').innerHTML = "This company name is unique.";
$("#add_new_customer_btn").prop('disabled',false);
} else {
document.getElementById("empty-message").style.color = 'red ';
document.getElementById('empty-message').innerHTML = "Company name not unique. Please try again.";
$("#add_new_customer_btn").prop('disabled',true);
}
}
});
}
</script>
这是我的表格:
<fieldset>
<legend><h1>New Customer Form</h1></legend>
<form name="add_customer" id="add_customer" method="post" action="actionpages/add_customer.cfm">
<input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name" onblur:"check_customer_name();" onFocus="check_customer_name();" onChange="check_customer_name();"><pre class="response" id="empty-message"></pre><br><br>
<strong>Primary Contact*:</strong><br>
<input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*">
<input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15">
<input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*">
<br><br>
<input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
<input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
<input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
<strong>Company Address:</strong><br>
<input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
<input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
<input name="new_city" id="new_city" type="text" required placeholder="City"><br>
<input name="new_state" id="new_state" type="text" required placeholder="State"><br>
<input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>
<br><br>
<input type="hidden" name="customer_type" value="billable">
<input type="hidden" name="ticket_type" value="billable">
<input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>
</form>
</fieldset>
这是我的CFC功能:
<cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />
<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>
<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
order by company_name
</cfquery>
<!--- Build result array --->
<cfloop query="data">
<cfset titleStruct = structNew() />
<cfset titleStruct['value'] = company_name/>
<cfset titleStruct['label'] = company_name />
<cfset arrayAppend(returnArray,titleStruct) />
</cfloop>
<!--- And return it --->
<cfreturn returnArray />
</cffunction>
<cffunction name="checkCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="string">
<cfargument name="check_customer_name" required="false" default="" />
<!--- localize function variables --->
<cfset var data = "">
<!--- Do search --->
<cfoutput>
<cfquery name="data" datasource="#datasource#">
select company_name
From customer_table
where company_name = <cfqueryparam value="#ARGUMENTS.check_customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>
<cfif #data.recordcount# eq 0>
<cfset result = "unique">
<cfelse>
<cfset result = "taken">
</cfif>
<!--- And return it --->
<cfreturn result />
</cfoutput>
</cffunction>