Posted in JavaScript, ColdFusion | Posted on 06-11-2009 | 4,903 views
Have you ever wondered how you could create JavaScript data from ColdFusion? Now before you say anything, I'm not talking about AJAX. While using AJAX to load data into the client is probably the most often used way to do this, it certainly isn't the only way. Consider the following example.
2
3<html>
4
5<head>
6<cfoutput>
7<script>
8var data = '#string#'
9alert(data)
10</script>
11</cfoutput>
12</head>
13
14<body>
15<h1>Demo</h1>
16</body>
17</html>
I've got a CFML variable, string, that I output within a script block. Because I'm working with a string, I surround the variable with single quotes. Double quotes would have worked as well. When run in the browser, the alert displays:
Woot. Nice and simple. Until someone goes and screws things up:
This generates:
2var data = 'Ray's neck is hurting today.'
3alert(data)
4</script>
Ouch. Obviously you could just wrap the output in double quotes, but if my ColdFusion variable had both single and double quotes, I'm screwed. We could use the jsStringFormat function.
2
3<html>
4
5<head>
6<cfoutput>
7<script>
8var data = '#jsStringFormat(string)#'
9alert(data)
10</script>
11</cfoutput>
12</head>
13
14<body>
15<h1>Demo</h1>
16</body>
17</html>
Notice now my string has both single and double quotes embedded in the variable. The jsStringFormat function handles it perfect. Here is how it outputs the variable:
Again, I say woot. But that's just a string. How would you convert an entire ColdFusion query into a JavaScript variable? Or an array? Or a struct? How about a struct that contains an array that contains a query that... err you get the idea. Let's take a look at a ridiculous example:
2<cfset addresses[1] = "403 Robinhood Circle, Lafayette, LA, 70508">
3<cfset addresses[2] = "1801 Kaliste Saloom Rd, Lafayette">
4<cfset addresses[3] = "400 Camellia Blvd, Lafayette, LA 70503">
5
6<!--- Set of long/lats --->
7<cfset longlats = []>
8<cfset longlats[1] = {lat=30.09,long=-91.9}>
9<cfset longlats[2] = {lat=30.08,long=-91.84}>
The code above generates an array of addresses, then an array of structures. ColdFusion provides us nice functions to introspect both arrays and structs (how do you think CFDUMP works?) so we could do this by hand, but luckily there is an even simpler solution: toScript. At it's simplest usage example, you provide it the data and the name of a JavaScript variable to create.
Which outputs:
2var addressesToPlot = new Array();
3addressesToPlot[0] = "403 Robinhood Circle, Lafayette, LA, 70508";
4addressesToPlot[1] = "1801 Kaliste Saloom Rd, Lafayette";
5addressesToPlot[2] = "400 Camellia Blvd, Lafayette, LA 70503";
6
7var locations = new Array();
8locations[0] = new Object();
9locations[0]["lat"] = "30.09";
10locations[0]["long"] = -91.9;
11locations[1] = new Object();
12locations[1]["lat"] = "30.08";
13locations[1]["long"] = -91.84;
14
15</script>
Nice and simple, right? The docs mention that it supports strings, numbers, arrays, structs, and queries, but not CFCs. That's only partially true. You can pass a CFC to toScript, but it outputs broken code. This is what I got when I passed a CFC with two methods:
2apple["getfoo"] = apple["getentries"] =
It looks like it got the methods but didn't know what to do with them. Either way, hope this is useful.
<.cfwddx action="cfml2js"
Up until now I've treated the creation of arrays by using value lists. For example:
<cfquery name="foo" datasource="dsn">
SELECT bar
FROM myTable
</cfquery>
<script>
var myArray = [<cfoutput>#ValueList(foo.bar)#</cfoutput>];
</script>
For example:
<script type="text/javascript" src="generate_some_javascript.cfm?youcaneven=senddata"></script>
This way you can load some JavaScript-ready data without mucking up your display code.
One additional note about doing this however: I've found that if you use ColdFire for debugging this additional .cfm request seems to confuse it and you'll end up getting the debug info for that request.
One note, the UI has changed slightly since I recorded those demos, but the idea is the same.
This gives me a start and some idead into into generating dynamic javascript for dynamic form fields.
[Add Comment] [Subscribe to Comments]