KB927917

Over the last few months, I have been upgrading some of our websites' login systems. Today I updated the login system of old internal site that some users still use to update stuff. The login system that worked great on our newer web apps, wouldn't load the login screen on the old system. Here is the order of operations:

• Main Page starts with style sheets, javascript & ajax library, starting body tag, etc.
• Login Management Custom Tag occurs in middle of page, between begin and end body tags.
• Login Management Custom Tag launches login cfwindow, navigates window to login form.
  
• End of page winds things down, includes closing body tag.

Everything here works great in Firefox (of course), and on our newer Ajax-driven apps it works in IE. However, on this old, not-very-ajaxy website, IE 8 shows the cfwindow appears, and then breaks on the navigate saying: "HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917); Line: 0; Char: 0; Code: 0". Pretty mysterious.

So, lots of searching, and I found this helpful post:

http://blogs.msdn.com/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx

and additionally this helpful post:

http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/db34068c-5307-4ab7-be03-15b86c2604bb

So, I tried moving my custom tag to the end of the page, outside of the body tag, and that worked great. From what I can tell, the cfwindow, or maybe the ColdFusion.navigate was trying to add elements to the body of the page, before the body had closed.

Whether or not the reason provided above is exactly correct, it makes some sense. After all, our new, ajaxy websites launch the cfwindow from within a container (usually cfdiv), meaning that the main-page's body tag has closed before the cfwindow ever tries to load.

In any case, whether my diagnosis is right or wrong, the medicine worked. This one was a tricky one, so I thought that I would share it with the world.

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.

More JavaScript, More "duh"

Another JavaScript "duh" moment. (You can see my previous JavaScript "duh" moment from last week here: http://nm1m.blogspot.com/2008/04/javascript-duh-moment.html ). A lot of times I want links to fire off JavaScript events, but to still look / taste / feel like links. Previously I have done it like this:

<a href="#" onClick="ColdFusion.Window.create('etc', 'etc.cfm');">

The upshot to this technique is that you get a link that looks and acts like a link. The minus is that when you click it, it appends a hash mark (#) to the end of your url. Not a big deal, but still.

On Friday, at the fabulous Salt Lake RIA Dev Shed, I learned another little "duh" JavaScript technique. Rather than trying to explain it, I will just show. You can do the same thing as the above like this:

<a href="javascript:ColdFusion.Window.create('etc', 'etc.cfm';">

Huzzah for cheap little JavaScript tricks!