Spry and invalid HTML

Over the last couple of days I've been starting to play with Spry, in hopes that it will lend itself to some UI controls I'm building. Basically I'm creating a ColdFusion version of the .NET "DataGrid" class (that's the short version -- it's a bit more of a complicated app specific UI control, but you get the idea). After first examination it looked as though Spry's use of XML data sets would be exactly what I needed. So I quickly included the JS files, followed some sample code and began trying to use the following (which was being dynamically generated by my View objects: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <script> var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" ); </script> <div spry:region="dswfp" id="wfp"> <div class="loading" spry:state="loading"><p>Loading ...</p></div> <div class="ready" spry:state="ready"> <table border="1"> <tr> <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th> </tr> <tr spry:repeat="dswfp"> <td>{dswfp::wafer_fab_process_name}</td> </tr> </table> </div> </div> </table> There are roughly 10 records in the XML file getting returned by Spry.Data.XMLDataSet(), yet all I was getting on the screen was:

WFP Name
{dswfp::wafer_fab_process_name}

...hmm...no records displayed. After some debugging, I saw that the "parent" HTML table didn't have any TR or TD tags within it -- the code went straight from the TABLE markup, into defining SCRIPT and DIV blocks. Although this table didn't have any "spry" namespace code within its attributes, the fact that this "parent table" was incorrectly marked up was the cause of the problem! (Unfortunately, Spry gave me no error messages or warnings -- it just...stopped working). So after a quick edit, the code now looks like so: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <script> var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" ); </script> <div spry:region="dswfp" id="wfp"> <div class="loading" spry:state="loading"><p>Loading ...</p></div> <div class="ready" spry:state="ready"> <table border="1"> <tr> <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th> </tr> <tr spry:repeat="dswfp"> <td>{dswfp::wafer_fab_process_name}</td> </tr> </table> </div> </div> </td> </tr> </table> ...and works quite nicely. So just a heads up: make sure your HTML is marked up correctly, even if it's not a table that directly uses the Spry namespace! The most frustrating part for me was the lack of any error messages or other useful indications as to what might be going on. Fortunately the fix was very straight forward, once I took a break from the code and came back to see the obvious flaw in my file. :) hth