John Example John Example - 1 year ago 99
Ajax Question

ColdFusion AJAX: Element is undefined in arguments

I'm doing some AJAX ColdFusion testing and I have an issue while sending data to ColdFusion server using AJAX.
Here is the HTML code I have:

<form method="post">
<p>
<input type="text" id="user_name" name="name" placeholder="name" value="test" />
<input type="text" id="user_email" name="email" placeholder="email" value="abc" />
</p>
<input type="button" value="Find Out" class="ajax_form"/>
</form>

<p id="insert"></p>


JS:

$(document).ready(function (){
$(".ajax_form").click(function (){
var that = $(this).parent(),
url = "ajax.cfc",
type = that.attr('method'),
test = {};

that.find('[name]').each(function(index, value){
var that = $(this),
name = that.attr('name'),
value = that.val();

test[name] = value;
});

console.log(test.name);

$.ajax({
url: url,
type: type,
data: {
method: "testCheck",
name: test.name,
email: test.email,
array: test
},

success: function (responce){
document.getElementById('insert').innerHTML = responce;
},
error: function (xhr, textStatus, errorThrown){
alert(errorThrown);
}
});
});
});


ajax.cfm is really simple and looks like this.

<cfcomponent output="false">
<cffunction name="testCheck" access="remote" returnformat="plain" returnType="string" output="false">
<cfargument name="name" type="string" required="false" />
<cfargument name="email" type="string" required="false" />
<cfargument name="array" required="false" />

<cfset var string = " " />

<cfif (arguments.name) eq "test">
<cfset string = arguments.array/>
<cfelse>
<cfset string = "incorrect" />
</cfif>

<cfreturn string />
</cffunction>
</cfcomponent>


The problem is that cf argument isn't defined (the error I get: "500 (Element ARRAY is undefined in ARGUMENTS)") or gets default value when I set it. I have a guess that this is about data type of the object I'm sending, but I can't come up with any solution. Is it possible at all to use this type of data as cfargument is this case?

Answer Source

The error is mainly due to following reasons:

  1. array as an object(JSON):

You are sending array as an object so the request will be made with a contentType of application/x-www-form-urlencoded by jQuery (as you have not explicitly specified it).

Hence, the object(array in the case) will be serialized into name/value pairs and will be appended in the URL so, the server will get following arguments(which was not desired):

array[name] = 'test'

array[email] = 'abc'

So, you have to serialize the data from client side and then deserialize at the server side like this:

   $.ajax({
        url: url,
        type: type,
        data: {
            method: "testCheck",
            name: test.name,
            email: test.email,
            array: JSON.stringify(test) <--- Serialize here -->
        }

        , success: function (responce){
            document.getElementById('insert').innerHTML = responce;
        }
        , error: function (xhr, textStatus, errorThrown){
            alert(errorThrown);
        }
    });

<--- Deserialize --->
<cfset local.array = deserializeJSON(arguments.array)>
  1. argument array has no default

The argument array has no default value and was not passed during the request(due to the above mentioned reason) so, it would be undefined.