Populating Spry Table using button action and Nested XML

Question

Ah, yet another question.
So I have a catalog page with a Spry repeating table. The XML
has 2 sets of nodes -- one for outfits and one for line sheets (the
technical drawings for clothes). What i want to do is have the
outfits show and populate the table to start off with, but
re-populate with the line sheet info if a user clicks on a button.
currently the page is set up and works perfectly by sucking
in the XML and populating the table. What I can't seem to do is get
the button (when clicked) to switch the outfit info with the line
sheet info.
I have the following
// javascript:
var siracusafall08 = new
Spry.Data.XMLDataSet("fall_collection.xml",
"collection/siracusa/outfits", { filterFunc: MyPagingFunc });
var siracusaLS = new
Spry.Data.NestedXMLDataSet(siracusafall08, "linesheet",
{filterFunc:MyPagingFunc });
siracusafall08.setColumnType("photoURL", "image");
siracusafall08.setColumnType("lrgphoto", "image");
var pageOffset = 0;
var pageSize = 1;
var pageStop = pageOffset + pageSize;
//var dssiracusafall08 = 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 chooseLS()
// no idea what to put here...
function UpdatePage(offset)
var numRows = siracusafall08.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:
siracusafall08.filter(MyPagingFunc);
html
<div spry:region="siracusafall08">
<table>
<tr spry:repeatchildren="siracusafall08">
<td valign="top">{name}<br />{desc}</td>
<td rowspan="8" valign="top" width="300"><img
src="imx/{photoURL}"/></td>
</tr>
<tr spry:repeatchildren="siracusafall08">
<td valign="top">{SKU1}<br />{SKU2}<br
/>{SKU3}</td>
</tr>
<tr spry:repeatchildren="siracusafall08">
<td valign="top"><a href="imx/{lrgphoto}"
target="_blank">enlarge</a></td>
</tr>
<tr spry:repeatchildren="siracusafall08">
<td valign="top"><input type="image"
src="../../imx/back.gif" onclick="UpdatePage(pageOffset -
pageSize);" />
<input type="image" src="../../imx/next.gif"
onclick="UpdatePage(pageOffset + pageSize);" /><br
/><br /><input type="button" value="filter"
onclick="chooseLS();" /></td>
</tr>
<tr>
<td height="200"> </td>
</tr>
</table>
</div>
XML
<collection>
<siracusa>
<outfits>
<photoURL>6648sm.jpg</photoURL>
<lrgphoto>6648lg.jpg</lrgphoto>
<SKU1>JS271SM</SKU1>
<SKU2>PN109SM</SKU2>
<SKU3></SKU3>
<name>Siracusa Micro Crepe</name>
<desc>Chestnut, Moss, Redwood, Black</desc>
</outfits>
<outfits>
<photoURL>5237sm.jpg</photoURL>
<lrgphoto>5237lg.jpg</lrgphoto>
<SKU1>JS272SM</SKU1>
<SKU2>LTK121SM</SKU2>
<SKU3>PW112SM</SKU3>
<name>Siracusa Micro Crepe</name>
<desc>Chestnut, Moss, Redwood, Black</desc>
</outfits>
<outfits>
<photoURL>5540sm.jpg</photoURL>
<lrgphoto>5540lg.jpg</lrgphoto>
<SKU1>JS272SM</SKU1>
<SKU2>LTK121SM</SKU2>
<SKU3>PW112SM</SKU3>
<name>Siracusa Micro Crepe</name>
<desc>Chestnut, Moss, Redwood, Black</desc>
</outfits>
<outfits>
<photoURL>6276sm.jpg</photoURL>
<lrgphoto>6276lg.jpg</lrgphoto>
<SKU1>JL258SM</SKU1>
<SKU2>PN100SM</SKU2>
<SKU3></SKU3>
<name>Siracusa Micro Crepe</name>
<desc>Chestnut, Moss, Redwood, Black</desc>
</outfits>
<linesheet>
<photoURL>5540sm.jpg</photoURL>
<lrgphoto>5540lg.jpg</lrgphoto>
<SKU1>JS128SM</SKU1>
<SKU2>Mandarin collar jacket with box pleat
cuff</SKU2>
<SKU3>XS-XL</SKU3>
<name>Siracusa Micro Crepe</name>
<desc>Chestnut, Moss, Redwood, Black</desc>
</linesheet>
</siracusa>
</collection>
There's nothing in the documentation about using a button to
repopulate a table. the Nested XML Data Sample page in the Spry
documentation has been helpful in the past however this is more of
a switch / toggle situation and frankly that kind of coding is a
bit beyond my fine arts-trained skills.
Any suggestions are greatly appreciated!

Answer 1

Hi Bit Crusher,
Sorry for the delayed response ...
Looking at your setup, you can get rid of most of the code in
collection.js since you are using a pageSize of 1 ... if displaying
only one row of a data set is all you ever need, then you can get
the equivalent functionality by just using a spry:detailregion and
a couple of prev()/next() functions. For example:
<script type="text/javascript">
var siracusafall08 = new
Spry.Data.XMLDataSet("fall_collection.xml",
"collection/siracusa/outfits");
siracusafall08.setColumnType("photoURL", "image");
siracusafall08.setColumnType("lrgphoto", "image");
var crepesfall08 = new
Spry.Data.XMLDataSet("fall_collection.xml",
"collection/crepes/outfits");
crepesfall08.setColumnType("photoURL", "image");
crepesfall08.setColumnType("lrgphoto", "image");
function DSPrev(ds)
var curRowNum = ds.getCurrentRowNumber();
if (--curRowNum >= 0)
ds.setCurrentRowNumber(curRowNum);
function DSNext(ds)
var curRowNum = ds.getCurrentRowNumber();
if (++curRowNum < ds.getRowCount())
ds.setCurrentRowNumber(curRowNum);
</script>
<div spry:detailregion="siracusafall08">
</div>
<div spry:detailregion="crepesfall08">
</div>
After you've simplified all that, the next thing I would do
to get your linesheet switching working is to use "states". Take a
look at these samples:
http://labs.adobe.com/technologies/spry/samples/data_region/RegionStatesSample.html
http://labs.adobe.com/technologies/spry/samples/data_region/StateMappingSample.html
The first link is some basic background on states, but what
should be of interest to you is the 2nd sample. What I would do is
have a "styles" and a "linesheet" state in my region.
Also since you are using nested XML data, you will need to
access your <linesheet> data with a NestedXMLDataSet:
http://labs.adobe.com/technologies/spry/samples/data_region/NestedXMLDataSample.html#Using NestedDataSets
http://labs.adobe.com/technologies/spry/samples/data_region/NestedDataSample.html
--== Kin ==--