Spry data region to display multiple data sources

Question

I'm developing an interactive menu using the Spry and Ajax framework that lists the menu items on the left (in a Spry accordion) to a corresponding image and description on the right. I have the basic functionality working, however, my menu items are broken into sub categories, and I can't seem to get my detail region to display attributes for more than 1 ds.
My current status is here: http://bit.ly/PUG1y
As you can see, my menu is broken into sections; i.e. Tapas, Pizzas, Entrees...etc. The Tapas secion works perfectly, and the Pizza section appears correctly on the left. However, I cannot get the detail region on the right to link to both Tapas and Pizzas. Right now I am trying to use separate XML files for each category, but could see my XML looking like this:
<?xml version="1.0" encoding="UTF-8"?>
<menu>
  <tapas>
       <item>
          <name>Fresh Tilapia Dip</name>
          <title>Fresh Tilapia Dip</title>
          <image>../one0one/images/food/crab_cakes.jpg</image>
          <desc>Mesquite Smoked Fresh Fish w/ Tortilla Chips and Pickled Jalapenos $6.99</desc>
       </item>
       <item>
            <name>Jamaican Jerk Chicken Satay</name>
          <title>Jamaican Jerk Chicken Satay</title>
          <image>../one0one/images/food/satay.jpg</image>
          <desc>Served with Pineapple Chutney w/ 101’s Spicy Tartar. $9.99</desc>
       </item>
    </tapas>
    <pizzas>
       <item>
               <name>Pizza1</name>
               <title>Pizza1</title>
               <image>img.jpg</image>
               <desc>description</desc>
       </item>                     
    </pizzas>
</menu>
I do not know how to set up the Spry regions to get this to work.  This seems like it should be pretty straightforward, but I have not had a lot of experience using Spry. What is the easiest/best practice method to get this to work correctly? Thanks for your help.

Answer 1

I feel your pain... I was JUST running into the same issue and debated on using a similar menu for the restaurant site I did.
Anyhow, here's how you do it. I solved it with this answer here: SOLVED: Multiple Data Sets (renamed)
You can reference the source code here. Data Set Shell with Accordion
The skinny version goes like this: You take your multiple data sets and combine them into one "Shell" using SpryDataSetShell.js
Copy that to your Spry Assets folder and link to it alnog with your Accordian JS files.
<script src="../../includes/SpryDataSetShell.js" type="text/javascript"></script>
create a shell of all your datasets.
var DATASET_2 = new Spry.Data.HTMLDataSet("../link_to_dataset", "Event_Table");
var NEW_DATASET_SHELL = new Spry.Data.DataSetShell(dataMay);
Then substitute your NEW_DATASET_SHELL in your code for the detail on the right
<div spry:detailregion="NEW_DATASET_SHELL" class="YourContainer">
Create an OnClick call in your accordian menu on the left...
<div class="AccordionPanelContent" spry:region="DATASET_1"><p spry:repeat="DATASET_1" spry:setrow="DATASET_1" onclick="NEW_DATASET_SHELL.setInternalDataSet(DATASET_1, true);">{item} {item}</p></div>
Do that for each of your accordian panels... Good Luck. Let me know if you need anything else.