John Example John Example - 2 months ago 24
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

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.