JQUERY AJAX - function success returns "UNDEFINED" with CFC query

Question

I have a problem with implementing AJAX in my form for linking drop down lists. I use ColdFusion (CFC file) for retrieving results from a query. The function is working and I retrieve the results in JSON format:

[ { "ID" : "APEX",
    "VALUE" : "Apex (not defined)"
  },
  { "ID" : "AVI",
    "VALUE" : "Plane (not defined)"
  },
  { "ID" : "TRAIN 1",
    "VALUE" : "Train 1st class"
  },
  { "ID" : "VOIT",
    "VALUE" : "Car"
  },
  { "ID" : "ZERO",
    "VALUE" : "Cost 0 (not defined)"
  }
]

I do not know if this JSON is correct in order to be used in the jquery script.

In the JQUERY script the success function doesn't retrieve these results and console.log(result) displays "undefined". If I try to do console.log(result.length), the error is displayed.

In Firebug I can see that the query has been done and the response is the JSON below.

My JQuery script in my CFM file:

$().ready(function() {
     $.ajax({
        type:   'GET',
        url:    'transport.cfc',
        data: {
            method:     'getTransports',
            CITY_TO:    'LUX',
            CITY_FROM:  'UWP'
        },
        dataType:       'json',
        contentType:    'application/json',

        success: function(result) {
            var select = $("##transp");
            select.empty();
            select.append(
                new Option('Select transport', '-1')
            );
            console.log(result) // displays "undifined"

            /* GENERATES BUG
            $.each(result, function(i, item) {
                select.append(
                    new Option(item.ID, item.VALUE)
                );
            });*/
        },

        error: function(xhr, message) {
            alert('ajax request failed');
            console.log(xhr, message);
        }
     });
});

I am using Jquery version 1.1.2. I tried to use the last version, but the result is the same. I also tried the following solution proposed on a forum: "replace json by jsonp". By doing that, the results are displayed in the console, thanks to console.log(result), but the loop each is not ok and the error 'ajax request failed' appears

I do not know how to solve the problem, can anyone help me to solve it?

In firebug I can see that the XHR query returns corrects results but in the headers it's written : "Content-Type: text/html; charset=UTF-8". It should be 'application/json' ? Thus I do not think that the JSON format is not correct — coeurdange57, Sep 17 '15 at 14:36
If the success argument `result` is `undefined`, the request didn't return valid JSON. Double check the HTTP response. — Alex, Sep 17 '15 at 19:04

score 1 · Answer 1 · edited May 23 '17 at 12:14

I posted a comprehensive answer to using Ajax with CFC functions. I think all you're missing is the returnformat of the function.

The Ajax code I posted:

$.ajax({
    async : true,
    type : 'POST',
    dataType : 'json',
    url : 'test.cfc?method=testing&returnformat=json',
    data : {
        a : $('#a').val(),
        b : $('#b').val()
    },
    success : function(data, textStatus) {
        $('#data').val(JSON.stringify(data));
    }
});

You're passing the method name in the data packet. Try adding the returnformat there as well:

url: 'transport.cfc',
data: {
    method:     'getTransports',
    returnformat:  'json',
    CITY_TO:    'LUX',
    CITY_FROM:  'UWP'
},

This should ensure that the content returned from the function has the correct content-type.

JQUERY AJAX - function success returns "UNDEFINED" with CFC query

1 Answers1