使用AJAX響應填充表單字段

我想根據form-field1的輸入填充表單字段2。這是我的兩個表單輸入字段。使用AJAX響應填充表單字段

<input size="50" name="customer_name2" id="customer_name2" tabindex="0" onblur="checkFilled()" type="text" list="customers" /> 

<cftextarea name="customer_address" cols="50" rows="5" id="customer_address2" tabindex="0" onFocus="populateAddressField()"></cftextarea>

第一種形式字段由以下JavaScript填充和該部分的工作原理：

<script> 
$(document).ready(function() { 
     $("##customer_name2").autocomplete({ 
       source: "cfcs/past_customers.cfc?method=lookupCustomers&returnformat=json", 
       minLength: 1, 
       select: function(event, ui) { 
        $('##customer_name2').val(ui.item.value); 
       } 
      }); 
}); 
</script>

我則第一表單字段的值傳遞給經由AJAX一個CFC運行查詢並填充結果的第二個表單字段。

<script> 
function populateAddressField(){     
      $.ajax({ 
      dataType: 'json', 
      data: { 
         customer_name2: $('##customer_name2').val() 
        }, 
      url: "cfcs/past_customers.cfc?method=getAddress&returnformat=json", 
      beforeSend: function(){ 
       $('.loader').show(); 
      }, 
      complete: function(){ 
       $('.loader').hide(3000); 
      }, 
      success: function() { 
       $("##customer_address2").val(response); 
      }  
     }); 
} 
</script>

這裏是我的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 distinct company_name 
From closed_tickets 
where ticket_type = "billable" AND 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="getAddress" access="remote" returnType="string"> 
<cfargument name="customer_name2" type="any" required="true"> 

<!--- localize function variables ---> 
<cfset var addressDetail = ""> 
<cfoutput> 
<cfquery name="addressDetail" datasource="#datasource#"> 
    SELECT company_address 
    FROM closed_tickets 
    <!--- adjust cfsqltype if needed ---> 
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name2#" cfsqltype="cf_sql_varchar"> 
</cfquery> 
</cfoutput> 
<cfreturn addressDetail.company_address> 
</cffunction> 

<cffunction name="getEmailAddressDetail" access="remote" returnType="string"> 
<cfargument name="customer_name2" type="any" required="true"> 

<!--- localize function variables ---> 
<cfset var dataDetail = ""> 
<cfoutput> 
<cfquery name="emailDetail" datasource="#datasource#"> 
    SELECT email 
    FROM closed_tickets 
    <!--- adjust cfsqltype if needed ---> 
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name#" cfsqltype="cf_sql_varchar"> 
</cfquery> 
</cfoutput> 
<cfreturn dataDetail.email> 
</cffunction> 

<cffunction name="getPhoneDetail" access="remote" returnType="string"> 
<cfargument name="customer_name2" type="any" required="true"> 

<!--- localize function variables ---> 
<cfset var dataDetail = ""> 
<cfoutput> 
<cfquery name="dataDetail" datasource="#datasource#"> 
    SELECT phone 
    FROM closed_tickets 
    <!--- adjust cfsqltype if needed ---> 
    WHERE company_name = <cfqueryparam value="#ARGUMENTS.customer_name#" cfsqltype="cf_sql_varchar"> 
</cfquery> 
</cfoutput> 
<cfreturn dataDetail.phone> 
</cffunction> 

</cfcomponent>

我的第一個表單字段是否正常工作，我可以在螢火，從我的AJAX調用我的反應有數據看，但是我revieve控制檯錯誤：

Uncaught ReferenceError: response is not defined

如何正確設置第二個表單字段的值與來自我的AJAX調用的響應？謝謝。

來源

2014-11-04 Brian Fleishman

我抓我的頭試圖找出這和「答案」之間的區別。然後我意識到沒有。很高興你知道了，但是儘量不要在原始問題中「修復」代碼，因爲那麼答案不再有意義:)。回滾編輯以保留上下文。 – Leigh 2014-11-04 16:05:05

請注意，'cfquery'標籤周圍不需要'cfoutput'，不要忘記查詢名稱的'var/local'範圍。 – Leigh 2014-11-04 16:06:14

哈哈。是的，這是有道理的。對於那個很抱歉。 BYW，我遺漏的部分，這是指什麼？我明白，我們基本上是通過指定函數（響應）將響應數據傳遞到函數中，但是是否將函數調用作爲範圍函數？請原諒我對此的無知。 – 2014-11-04 16:07:40

我自己找到了答案。在界定我的成功功能時，我顯然忽略了（共鳴）。

我改變了我的成功，函數這一點，它的工作：

success: function(response) { 
      $("##customer_address2").val(response); 
     }

來源

2014-11-04 15:12:14

使用AJAX響應填充表單字段

回答

相關問題