Using coldfusion and passing a structure of data to and from javascript functions

hi,

I have been learning javascript and am used to passing simple data to and from functions but now I would like to be able to send / receive more complex structures/arrays of data from and to coldfuson.
Can anyone shed any light on the best way to do this


Thanks
LmillardAsked:
Who is Participating?
 
GjslickConnect With a Mentor Commented:
Ok, what you want to do is first convert your data into a JSON string.  This will allow you to send complex objects/arrays via ajax (as there is no concept of 'object' or 'array' when it comes to HTTP; there is just plain text).  So to do this, you'll need a copy of Douglas Crockford's json2 script, as jQuery doesn't come with the ability to create a JSON string from an object.  You can get it here: http://json.org/json2.js.  Just don't forget to remove the first line of the file.

Once you have that, and you have included it on your page along with jQuery, you will use the second argument to .load() to send the JSON string directly to the server as a POST parameter.  I usually just send it under the name 'data'.  Note that because this will be a POST parameter (not a URL parameter), you will retrieve it from the 'form' scope in ColdFusion. Here's an example:

<script src="jquery-1.4.2.min.js"></script>
<script src="json2.js"></script>
 
<script>
  function getBlogCats( pId, titleId ) {
    var data = {
      pId: pId,
      titleId: titleId
    };

    $( '#floatbox' ).html( '<img src="../../Assets/Img/loading.gif" />' );
    $( '#floatbox' ).load( '../BlogManager/BlogCatSearch.cfm', { data: JSON.stringify( data ) } );
  }
</script>

Note the use of JSON.stringify() to convert your data object into a JSON string.

------------------------------------

Now in your .cfm file, you just need to de-serialize the JSON string into native ColdFusion structs/arrays.  Just for example purposes, try this:

<cfset data = deserializeJSON( form.data )>
<cfdump var="#data#">


That should be all you need.  For other languages on the server side, you would use the JSON de-serializing function that is available for that language.  For example, in php, it's json_decode().
0
 
darren-w-Commented:
Hi,

You can pass an object to a function, here is a bit about it.

http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-javascript/

You build an object that has attributes and then just pass it to a function, you can then pull attributes out of it as you please, its similar to passing an array.

Darren
0
 
ZvonkoSystems architectCommented:
The format for complex datastructure is colled JASON.
ColdFusion speeks JASON:
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=JavaScriptFcns_07a.html

0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
BadotzCommented:
>>The format for complex datastructure is colled JASON. (sic)

Actually, it is called "JSON", which stands for "JavaScript Object Notation".

Visit http://www.json.org for all things JSON.
0
 
GjslickCommented:
Are you saying that you want to pass data from client side JavaScript functions into server side ColdFusion CFC's/functions, and receive data back?  If so, which ColdFusion version are you using?

Otherwise, can you explain a bit more?
0
 
psvineeshCommented:
Hi,
Using cfajaxproxy we can send and receive complex data to and from ColdFusion via CFC.Please refer
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_a-b_3.html
Thanks
Vineesh
0
 
LmillardAuthor Commented:
Apologies for the delay with this question,

Unfortunately I wont be able to use the cfajaxproxy as the code does need to be transposed to other languages so I am using standard jquery that will then post to either a cfc or .cfm page and then have a result returned. The result could be any format.

The code example below is a typical way that it is currently done but with the parameters being sent individually. I would prefer to be able to send all info as a structure.



function getBlogCats(pId,titleId) {
    $('#floatbox').html('<img src="../../Assets/Img/loading.gif" />')
    $("#floatbox").load('../BlogManager/BlogCatSearch.cfm?pid='+escape(pId)+'&titleId='+escape(titleId))
}


The function is called by a simple <a onclick="getBlogCats(1,123)">View Blog Categories</a>

Open in new window

0
 
LmillardAuthor Commented:
Thanks for taking the time to put together a full example, this is exactly what I needed, perfect.
0
 
GjslickCommented:
Glad I could help!  

All the best,

Greg
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.