2

I am trying to populate a selectlist from an AJAX call to a CFC. In my CFC, a query is run that grabs a list of "vehicles" from my DB that are marked as active. Once a selection is made from the selectlist, a set of form inputs are populated based on that selection.

I know that the data returned from my selectlist should be a list of 3 vehicles.

When I load the page, my selectlist show the following text as the three items in the list:

[object HTMLSelectElement]
[object HTMLSelectElement]
[object HTMLSelectElement]

In the Chrome Browser console, I can see the response from AJAX call to my CFC:

{ "COLUMNS":["VEHICLE_NAME"]
   ,"DATA": [ ["Service Truck 10"]
             ,["Ford Transit Connect"]
             , ["Ford TransitConnect New"]
            ]
}

What's weird is that is shows that response for each of three rows returned from my query. What would cause that?

Here is my AJAX calls:

<!--- Retrieve list of vehicles and populate the mileage in the form--->
 <script>
    $(document).ready(function () {       

    //populate the vehicle selectlists
    $.ajax({
       url: 'cfcs/mileagedata.cfc?method=getData&returnformat=json',
       dataType: 'json',
       success: function(response){
           $.each(response.DATA, function(i, row){
            // get value in first column ie "description"
            var description = row[0];

            // append new option to list
            $("#vehicle_name").append($('<option/>', { 
                    value: vehicle_name,
                    text : vehicle_name 
            }));
        });
       },
       error: function(msg){
           console.log(msg);
       }
    })

    //Populate the start and end odometer text boxes
    $.ajax({
        url:'cfcs/mileagedata.cfc?method=getDetail&returnformat=json',
        data: $('#addmileage').serialize(),
        success: function(response) {
            $("#start_odometer").val( "worked" );
            $("#end_odometer").val( "worked" );
            }
      });

  });
 </script>

Here is my CFC:

<!---Service Vehicle Slect Box --->
<cffunction name="getData" access="remote" returntype="query">

    <!--- Function to get data from datasource --->
    <!---Get Service Vehicles --->
    <cfquery name="data" datasource="#datasource#">
        select vehicle_name
        from vehicles
        where active = '1'
    </cfquery>
    <!--- Return results --->
    <cfreturn data>
</cffunction>

<cffunction name="getDetail" access="remote" returnType="string">
    <cfargument name="vehicle_name" type="any" required="true">

    <!--- localize function variables --->
    <cfset var dataDetail = "">
    <cfoutput>
    <cfquery name="dataDetail" datasource="#datasource#">
        SELECT mileage
        FROM   vehicles
        <!--- adjust cfsqltype if needed --->
        WHERE vehicle_name = <cfqueryparam value="#ARGUMENTS.vehicle_name#"      cfsqltype="cf_sql_varchar">
    </cfquery>
    </cfoutput>
    <cfreturn dataDetail.mileage>
</cffunction>
Leigh
  • 28,765
  • 10
  • 55
  • 103
Brian Fleishman
  • 1,237
  • 3
  • 21
  • 43
  • Is `vehicle _name` (note the spaces) a typo or is that in your actual code? – Leigh Sep 11 '14 at 19:46
  • 1
    Did you verify that your cfc functions return the expected results by running them directly from a cold fusion page? – Dan Bracuk Sep 11 '14 at 19:46
  • Yes that's just a stackoverflow typo. And yes if I run the CFC directly, it shows the same response as my Chrome console window shows. Those same results are posted in the question. – Brian Fleishman Sep 11 '14 at 19:48
  • 1
    (Edit) Your variable names do not match. You extract the row value into a variable named `description` but then use "vehicle_name" to populate the list value and text. It should be `description` – Leigh Sep 11 '14 at 19:50
  • Geeze Leigh. Saved my day again! Another set of eyes always helps. I'm using the code you helped me with on a different post and just modifying it slightly for this scenario. Thanks a bunch. – Brian Fleishman Sep 11 '14 at 19:53
  • Someone else's eyes saved my sanity today, so I am (gratefully) paying it forward :) I will write it up as an answer to close out the thread. – Leigh Sep 11 '14 at 19:57
  • Not sure if I should post a new question for this, but on my second ajax call, I am trying to pass the value of the chosen option in my selectlist. Is just passing the serialized form in the "data:" part of the ajax call correct? – Brian Fleishman Sep 11 '14 at 19:59
  • More like `data: { parameterName : "some string you want to pass" }` – Leigh Sep 11 '14 at 20:06

1 Answers1

1

(From comments)

Your variable names do not match. In "success", uou extract the row value into a variable named description but then use "vehicle_name" to populate the list value and text. It should be description

Tip: No need for cfoutput tags around a cfquery. The variables inside the query tag will be evaluated automatically. Also, do not forget to var/local scope the query variable ie data inside the first cffunction.

Leigh
  • 28,765
  • 10
  • 55
  • 103