Twitter: raymondcamden


Address: Lafayette, LA, USA

Using argumentCollection with AJAX calls to ColdFusion Components

11-01-2010 8,968 views jQuery, ColdFusion 19 Comments

Wow, this is a cool tip. I've had this in my queue to write about for a few weeks now but I was delayed due to MAX. Credit for this goes to Stephen Duncan Jr - I'm just passing it along - and to be honest - it kinda seems obvious now - but it's certainly not something I've thought of before. I've said it before - but I'll say it again. I love my readers.

Back in March I blogged about an interesting problem I ran into with jQuery and CFCs. This wasn't a jQuery specific issue, but as I use jQuery most of the time I ran into it there. I won't repeat the entire previous blog entry, but the basic problem was that there didn't seem to be a good way to post arrays of data to a back end CFC. jQuery does serialize the array, but it does it in a way that makes CFCs sad. My solution was to encode the array into JSON and update my CFC to accept either "real" arrays or JSON-encoded arrays. It worked... but I hated modifying my CFC.

Fast forward a few months and a reader, Stephen Duncan JR, pointed out something interesting. If you read his comment, you will see he did something a bit different. Instead of simply passing data=json version of array, he passed a JSON-encoded version of a structure containing name-value pairs. He used the argumentCollection feature of CFCs.

If this is the first time you've heard of argumentCollection, don't be surprised. It is documented but not used very often. It's based on an even older feature, attributeCollection, that is used in custom tags. argumentCollection allows you to pass a structure of names and values. ColdFusion will treat this as if they were real arguments and values. So consider a structure data that contains:

name=ray
age=37
coolness=epic

If you pass argumentCollection=data to a CFC method (or any UDF), then ColdFusion acts as if you had passed arguments name, age, and coolness. As I said above, this isn't new at all, but I've never seen it used with an AJAX post like this. What's nice then is that on the server side, you can have a "proper" method without any if/else statement to see if the result was JSON. As a quick example, here is an updated version of the front end code based on the previous example. I went ahead and added jquery-json to the template to further simplify things.

view plain print about
1<html>
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<script type="text/javascript" src="jquery.json.min.js"></script>
6<script>
7
8$(document).ready(function() {
9    var mydata = {data:[1,2,3,4,5,"Camden,Raymond"]};
10
11    $.post("test.cfc", {method:"handleArray",argumentCollection:$.toJSON(mydata), returnFormat:"plain"}, function(res) {
12        alert($.trim(res));
13    })
14
15});
16
17</script>
18</head>
19<body>
20</body>
21</html>

And as I said before, the back end CFC is now nice and simple:

view plain print about
1<cfcomponent>
2
3<cffunction name="handleArray" access="remote" returnType="numeric">
4    <cfargument name="data" type="array" required="true">
5    <cfreturn arrayLen(arguments.data)>
6</cffunction>
7
8</cfcomponent>

19 Comments

  • Commented on 11-01-2010 at 9:34 PM
    I've only been pairing jQuery with ColdFusion over the last year or so but in that time I've use both together heavily. This JSON and CfArgument technique was something I came across very early and constantly use it. I've ended up using JSON in so many more situations and ways than I'd previously ever though. I blame CF :) CF makes it a dream.

    Thanks for posting this. It's a great clarification on the topic.
  • Chris H #
    Commented on 11-02-2010 at 4:36 AM
    Nice tip, thanks!
    Should also work with Ext.util.JSON.encode()
  • Commented on 11-02-2010 at 8:22 PM
    I love seeing solutions that use the syntax of the existing language.
    With AJAX, two things I always remember to use are: cfsetting showdebugoutput="false" at the component level, and output="false" for the functions.
  • Commented on 11-04-2010 at 4:08 PM
    This is amazing! I enjoy argumentCollection on the server side, but I had NO idea that you could use it in URL-based invocation. Is this something new in CF9? Or have I just been unaware of it for a long time?
  • Commented on 11-04-2010 at 4:56 PM
    Since argumentCollection was supported server side with 6, I'd say this probably worked in 6. However, with CFCs only outputting WDDX back then, I don't think many people used them for AJAX.
  • Commented on 11-04-2010 at 9:02 PM
    Bananas! :) I don't know why, but this is just sort of awesome.
  • Commented on 11-22-2010 at 10:52 AM
    Nice! Exactly what I needed.

    Now, has anyone had success getting CF to parse a JSON string into a cfcomponent object type? What I mean is:
    <cffunction name="handleObj" access="remote">
    <cfargument name="obj" type="cfcs.testobj">
    ...
    </cffunction>

    I would hope that if my testobj looked like:
    <cfcomponent>
    <cfproperty name="attr1" type="string">
    </cfcomponent>
    ...that I could call method=handleObj&argumentCollection={"obj":{"attr1":"hello"}} and CF would recognize the object by it's signature and create it with the properties set, just as it can do when receiving a Flex object. But instead it errors with "the OBJ argument passed to the handlObj function is not of type cfcs.testobj".

    On a whim I tried &argumentCollection={"obj":{"attr1":"hello","__type__":"cfcs.testobj"}}, but alas it doesn't work in reverse. ;-)
  • Commented on 11-22-2010 at 10:53 AM
    You would need to do it manually. Shouldn't be too hard though. Just use a populate method for your entities that would allow for a struct of name/value pairs.
  • Commented on 11-22-2010 at 11:08 AM
    Thanks Ray, this is true. Though I guess what I was ultimately hoping for was the implicit get & set methods that you also get when CF 8 creates an object automatically for you. eg: I would like a testobj.setAttr1() method to be called to validate the attr1 value received in the method call's JSON. Of course a populate() method could do this too, and is what I will have to resort to. I just was hoping to not have to reinvent the wheel (especially before our eventual move to CF9, which I think gives implicit get & set methods?)
  • Commented on 11-22-2010 at 11:17 AM
    Yeah, in CF9 if you were to run ob.setname(struct.name) that you can do some validation in a custom setter or let the implicit one just set the value.
  • Commented on 11-22-2010 at 11:18 AM
    And you want to be careful of course. If I see you passing a JSON string of complex data to a CFC I'm going to open up Firebug and see how much I can break it/mess with it. ;)
  • Commented on 11-22-2010 at 11:59 AM
    :-) I see your point...but on the other hand I don't see much difference between a complex dataset and a bunch of form values being submitted at once; it's all just data structure variations. Unless you were hoping I was going to be passing in strings of method call instructions ;-)
  • Commented on 11-22-2010 at 12:59 PM
    I never assume a person isn't too stupid to blindly trust Ajax requests. :)
  • Chris Bowyer #
    Commented on 02-02-2011 at 10:51 AM
    Quick question... Is argumentCollection restricted to Form and URL scope?
  • Commented on 02-02-2011 at 11:17 AM
    Technically no. In this example we are talking about making an Ajax request. The only way to pass arguments in that case is via form/url, so the answer is kind of yes in that regard.
  • Chris Bowyer #
    Commented on 02-03-2011 at 4:25 PM
    A very cool answer. Thanks Ray. Actually. The reason I asked, was because I couldn't get it to work with Client scope. Your answer helped a lot though, because it encouraged me to look deeper into my issue, and there it was, a coding error. I guess however, that it is better to be specific when adding just a few arguments, especially in non Form, URL scopes, where there can be many in a collection.
  • Joanne Corless #
    Commented on 09-06-2013 at 4:48 AM
    Thank you for posting this and the previous blog - you've just saved me from a very big headache regarding this very issue.

    We've an mapping tool supplied by a third party that generates polygons for us using javascript and I was struggling to deal polygons that generated lots of points i.e. in the case of curves. After I had constructed the polygon string it basically blew the string buffer on the post.

    However using this method, I've been able to pass in much larger polygons that I have before, solving my problem and enabling me to work on the server rather than in the browser.
  • Commented on 11-03-2013 at 7:12 PM
    Ray, your example has 3 name/value pairs, but your code has an array of 5 elements.
    Are you saying that each array element can be a name/value pair?
  • Commented on 11-07-2013 at 2:35 PM
    Um no. My argument was data and the value happened to be an array. That's all. I could have done this too:

    var mydata = {data:[1,2,3,4,5,"Camden,Raymond"],goo:1,hoo:1};

    That would be 3 args to the CFC (data, goo, and hoo), with data being an array, goo and hoo being 1.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty