CODEWITHSUNDEEP
ajaxcoldfusioncfc
Brian Fleishman
Brian Fleishman

Reputation: 1257

Populate form field with AJAX response

I am trying to populate form-field2 based upon the input of form-field1. Here are my two form input fields.

<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>

The first form field is populated by the following javascript and that part works:

<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>

I then pass the value of the first form field to a CFC via AJAX to run a query and populate the the second form field with the results.

<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>

Here is my 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>

My first form field is working properly and I can see in firebug that my response from my AJAX call has data, however I revieve a console error: 

Uncaught ReferenceError: response is not defined

How can I properly set the value of the second form field with the response from my AJAX call? Thanks.

Upvotes: 2

Views: 1740

Answers (1)

Brian Fleishman
Brian Fleishman

Reputation: 1257

I found the answer on my own. I apparently left out (resonse) when defining my success function.

I changed my success function to this and it worked:

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

Upvotes: 2

Related Questions