Tabbed Panel using UpdateContent doesn't properly display spry .html page

Question

Quick question. I have a tabbed panel widget with 12 tabs.
I'm using the UpdateContent snippet to pull in .html pages per tab.
when I have straight .html on the pages the content displays
without a problem.
What I need is for each tab to pull in an .html page that
contains a spry table that has an XML data set (think product page
with "next" and "prev" buttons to cycle through the content).
The .html page with the spry table works like a charm...on
it's own. however when I use it in conjunction with the tabbed
panel all I see is the bracketed code (i.e. {imgURL} {productName}
{SKU}) rather than [photo] large T-shirt SKU:1111.
A while ago I did an accordion that had dynamic content per
generated panel -- this utilized the Spry.Data.NestedXMLDataSet
function. A bit of a similar idea although I'm not sure if this
would also work with the tabbed panel.
Any suggestions would be helpful and I can drop the code if
that would also help. Thanks!

Answer 1

well, what I have is:
index page with tabbed panel
|
V
click tab
|
V
content from first option .html page loads. this content has
a dataset repeating table.
The main page already had the SpryData.js and also
UpdateContent, as follows:
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('one','siracusa.html');">Siracusa
Micro Crepe</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('two','peony_georgette.html');">Peony
Printed Silk Georgette</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('three','wool_pucker.html');">Wool
Pucker</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('four','textured_dot.html');">Textured
Dot</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('five','textured_cotton.html');">Textured
Cotton</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('six','crane.html');">Crane
Printed Four Ply Silk</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('seven','tencel_jersey.html');">Tencel
Jersey</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eight','circular_wool.html');">Circular
Stitch Wool</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('nine','silk_burnout.html');">Silk
Burnout</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('ten','organza.html');">Floral
Silk Organza</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('eleven','micro_crepe.html');">Micro
Crepe</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="one">Siracusa</div>
<div class="TabbedPanelsContent" id="two">Peony
Printed</div>
<div class="TabbedPanelsContent" id="three">Wool
Pucker</div>
<div class="TabbedPanelsContent" id="four">Textured
Dot</div>
<div class="TabbedPanelsContent" id="five">Textured
Cotton</div>
<div class="TabbedPanelsContent" id="six">Crane
Printed Four Ply Silk</div>
<div class="TabbedPanelsContent" id="seven">Tencel
Jersey</div>
<div class="TabbedPanelsContent" id="eight">Circular
Stitch Wool</div>
<div class="TabbedPanelsContent" id="nine">Silk
Burnout</div>
<div class="TabbedPanelsContent" id="ten">Floral Silk
Organza</div>
<div class="TabbedPanelsContent" id="eleven">Micro
Crepe</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
Let's say you clicked on the Siracusa tab. This would call up
siracusa.html, which has
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="../../ed_style.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
<!--
var fall08 = new Spry.Data.XMLDataSet("fall_collection.xml",
"collection/outfits", { filterFunc: MyPagingFunc });
fall08.setColumnType("photoURL", "image");
fall08.setColumnType("lrgphoto", "image");
var pageOffset = 0;
var pageSize = 1;
var pageStop = pageOffset + pageSize;
//var dsfall08 = new
Spry.Data.XMLDataSet("fall_collection.xml", "collection/outfits", {
filterFunc: MyPagingFunc });
function MyPagingFunc(ds, row, rowNumber)
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
function UpdatePage(offset)
var numRows = fall08.getUnfilteredData().length;
if (offset > (numRows - pageSize))
offset = numRows - pageSize;
if (offset < 0)
offset = 0;
pageOffset = offset;
pageStop = offset + pageSize;
// Re-apply our non-destructive filter on dsStates1:
fall08.filter(MyPagingFunc);
-->
</script>
Sircusa Micro Crepe
<div spry:region="fall08">
<table>
<tr spry:repeatchildren="fall08">
<td colspan="5 "><img
src="imx/{photoURL}"/></td>
</tr>
<tr spry:repeatchildren="fall08">
<td><a href="imx/{lrgphoto}"
target="_blank">enlarge</a></td>
<td>{SKU1}</td>
<td>{SKU2}</td>
<td>{SKU3}</td>
<td>{name}</td>
<td>{desc}</td>
</tr>
</table>
<input type="button" value="Prev"
onclick="UpdatePage(pageOffset - pageSize);" />
<input type="button" value="Next"
onclick="UpdatePage(pageOffset + pageSize);" />
</div>
siracusa.html works more than fine. pulls in the photo, link,
SKU and info without any problem.
When you're on the base page with the tabbed panel the only
thing that comes up are the bracketed info, i.e. {SKU} {SKU1}
{SKU2}.
What I need help with is actually having the pulled in data
table (in the various tabbed panel content areas) actually then
populate the repeat regions rather than just showing the
code...