*Update to previous post* CF-Ajax gets jealous

This post modifies the following previous post:

Create Spry Data Sets Using Inline Data

It turns out that the above doesn't work inside of a bound CFDiv. For instance, if your Spry dataset lives on a pages called data.cfm, and you include data.cfm on another page using a bound cfdiv, it breaks. For the below example, you can put the guts of my previous post on this subject (referenced above) into data.cfm if you want. See the example below:

<----------- data.cfm ----------->
...
Create a spry dataset
...
Show dataset in a dynamic region
...
<----------- End data.cfm ----------->


<----------- view_data.cfm ----------->
...
<cfdiv bind="url:data.cfm" />
...
<----------- End view_data.cfm ----------->


I have spent almost two entire days trying to get the above to work. Interestingly, my research into the above with FireBug shows that I can get it to actually create and populate the dataset. However, try as I might, I can't get the dynamic region in view_data.cfm to show any data. I have researched on the web, and found others with the same finding; for example:

Spry + CFDIV = No Love

I love the CF Ajax goodness, but this is very frustrating and a major limitation. It makes it so that I can't use Spry (and possibly other Ajax frameworks) on big apps that include CF-Ajax (especially bound cfdivs). I work for a government agency, and we write some very large, powerful, complicated apps using ColdFusion. If the CF-Ajax makes it so that I can't extend the CF goodness with other Ajax frameworks, then this is a problem

I am hopeful that Adobe will address these sorts of CF-Ajax quirks in CF 9. If they don't, I will probably think twice in the future about using the CF Ajax features in the future.

Create Spry Data Sets Using Inline Data

I finally figured out how to create a Spry dataset using inline data. This is a major step towards usability, and wasn't posted on any of the Spry examples that I searched thru on Adobe's site.

To create a Spry dataset using inline data, you can just create a javascript array, and give the array to the dataset object using the Data Set's setDataFromArray(array) function. I have tested it in both FireFox and IE. You can find more information about the setDataFromArray(array) fuction here: http://labs.adobe.com/technologies/spry/articles/data_api/apis/dataset.html#setdatafromarray

The example below uses ColdFusion syntax to get data from the database and to populate the array. However, this would work with whichever language you like, or even with static data. See the following example:

Example:

<cfquery name="get_users" datasource="ds">
SELECT last_name, first_name, phone, address
FROM user
</cfquery>

<script type="text/javascript" src="Spry_1_6_1_022408/includes/SpryData.js"></script>

<script>
user_array = [<cfloop query="get_users">{last_name: "#get_users.last_name#", first_name: "#get_users.first_name#", phone: "#get_users.phone#", address:"#get_users.address#"}<cfif currentrow="" neq recordcount="">, </cfif></cfloop>]

user_dataset = new Spry.Data.DataSet();

user_dataset.setDataFromArray(user_array);
</script>

<div id="users_region" spry:region="user_dataset">
<table border="1">
<tr>
<th spry:sort="last_name">Name</th>
<th spry:sort="phone">phone</th>
<th spry:sort="address">Address</th>
</tr>
<tr spry:repeat="personnel_dataset">
<td>{last_name}, {first_name}</td>
<td>{phone}</td>
<td>{address}</td>
</tr>
</table>
</div>

You may have noticed that the above example doesn't var scope its JavaScript variables. This was on purpose, and it will still work. Experience has shown that var scoping variables can make them incompatible with some of the ColdFusion 8 CF-ajax stuff.