Returning Multiple Value Elements to ColdFusion Remote Method via jQuery AJAX

Posted: June 7, 2011 in ColdFusion, JavaScript

Lets say I have a select element that supports multiple selected values:

<form>
<select id="mySelect" multiple size="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

I wish to return this information to my ColdFusion CFC that contains a remote method via AJAX:

$.ajax({
	type: 'POST',
	url: 'myCFC.cfc',
	dataType: 'JSON',
	data: {
		'method':'myMethod',
		'value':$('mySelect').val()
	}
});

My CFC method looks like:

<cffunction name="myMethod" access="remote" output="false">
	<cfargument name="value" required="true" type="string">

	<cfset local.myVar = arguments.value>
	<!--- more logic --->
</cffunction>

This solution will error out due to the fact that the key “value” passed via AJAX is actually passed as “value[]”. Note the appended brackets denoting an array. I can’t reference “#arguments.value[]#” as this tries referencing an array and “#arguments[‘value[]’]#” is not allowed.

I tried all sorts of ways to try and get at that key value in the method. The only way I could come up with was to reference the argument via an index such as “arguments[1]”. But my real code was too complex to rely upon this method.

Another way was to append “.toString()” call the the end of the “val()” call when retrieving the values selected. This converts the array of values to a comma-delimited string of values. However this method will not allow the use of commas.

What I ended up doing was inserting some logic to convert any arrays into a pipe-delimited list. It’s not the best solution in the world but I think it’ll work.

var thisVal = $(this).val();
if ($.isArray(thisVal))
	var thisValRtn = thisVal.join("|");
else
	var thisValRtn = thisVal;

$.ajax({
	type: 'POST',
	url: 'myCFC.cfc',
	dataType: 'JSON',
	data: {
		'method':'myMethod',
		'value':thisValRtn
	}
});

If you have a better method than this, I’d love to hear about it.

Advertisements
Comments
  1. Ahah! I knew there was a better way to go from array to list. Sorry about sending you the slower one. 🙂

  2. Henry says:

    To pass array, use argumentCollection. You can use cfajaxproxy and send the whole form over, then you’ll see how it uses argumentCollection.

    • Chris says:

      Thanks for the suggestion Henry. I have a very specialized form that I only want specific element sent over at a time and it builds itself on the fly. I’ll look into using the argumentCollection though. Do you have any examples for me to look at?

  3. Joel Cox says:

    Add:

    jQuery.ajaxSettings.traditional = true;

    to your document.ready method

    • Chris says:

      Thanks Joel for your suggestion. While this looks like a decent solution it does not take into account commas. Even though I see each value being transmitted separately through FireBug, it is captured by ColdFusion as a comma-delimited list.

  4. Joel Cox says:

    True, but you can now use CF functions on the list…ListToArray, cfloop over the list, etc. The jQuery.ajaxSettings.traditional gets rid of the unwanted [], which I assumed was at the root of your problem.

  5. Phil Mervis says:

    Just a note if anyone comes by this. I did the following:

    var thisValRtn = thisVal.join(“,”);

    It works fine for turning it into a comma delimited value list.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s