How to display content dynamically base on the menu selection?

Question

I have only one XML file to populate my menus and display the
content base on the menu selection.
If I select anything by name on the menus, example Math all
the the Math products will display on the dsFeatures region.
I use istinctOnLoad: true, distinctFieldsOnLoad:['name']
function to remove duplicate rows from the data set when it loads.
So far so good.
Once I try to select from the grades menu this does not
display anything.
I'll need to dynamically change the dsFeatures.setPath when I
click on the menus some how.
dsFeatures.setXPath("products/product[grade =
'"+???+"']/features/feature");
Below is my code.
XML used to create the menus and the display the content.
<products>
<product>
<name>Math</name>
<category>Life Math</category>
<grade type="grade">Grade 6 - 8</grade>
<subject>Life Math Grade 6 - 8</subject>
<image>images/math_icon.png</image>
</product>
<product>
<name>Math</name>
<category>Division</category>
<grade type="grade">Grade 5</grade>
<subject>Life Math Grade 5</subject>
<image>images/math_icon.png</image>
</product>
<product>
<name>Science</name>
<category>Life Math</category>
<grade type="grade">Grade 6 - 8</grade>
<subject>Life Science Grade 6 - 8</subject>
<image>images/science_icon.png</image>
</product>
<product>
<name>Social Studies</name>
<category>Studies</category>
<grade type="grade">Grade 5</grade>
<subject>Social Studies Life Grade 5</subject>
<image>images/social_icon.png</image>
</product>
<product>
<name>Language Arts</name>
<category>Life Arts</category>
<grade type="grade">Grade 3 - 4</grade>
<subject>Life ArtsGrade 3 - 4</subject>
<image>images/language_icon.png</image>
</product>
</products>
// Get all the products data and use distinct() to filter the
names.
var dsProducts = new
Spry.Data.XMLDataSet("included/d_products.xml",
"/products/product", { useCache: false, distinctOnLoad: true,
distinctFieldsOnLoad:['name']});
// Get the menu by grade using distinct()
var dsByGrade = new Spry.Data.XMLDataSet(null,
"/products/product/grade", { useCache: false, distinctOnLoad: true,
sortOnLoad: "grade", distinctFieldsOnLoad:['grade'] });
// Create the dsFeatures data set, pass a null for the URL
parameter so that it doesn't load
var dsFeatures = new Spry.Data.XMLDataSet(null,
"/products/product[name = '{dsProducts::name}']/features/feature",
{ useCache: false });
// Define a function that to register as an observer on
dsProducts.
function updateCategoriesAndFeatures(notificationType,
notifier, data)
// Interested in "onPostLoad" notifications.
// If it is any other notification, just bail.
if (notificationType != "onCurrentRowChanged" &&
notificationType != "onPostLoad")
return;
// Received an "onPostLoad" or "onCurrentRowChanged
notification
// from dsProducts! Ask it for its XML document. If it has
one, tell
// dsFeatures to extract its data from that document.
var doc = dsProducts.getDocument();
if (doc)
if (notificationType == "onPostLoad")
dsByGrade.setDataFromDoc(doc);
dsFeatures.setDataFromDoc(doc);
// Register the function as an observer on dsProducts.
dsProducts.addObserver(updateCategoriesAndFeatures);
Menus:
Display by names:
<ul spry:region="dsProducts" id="nameRegion">
<li class="product" spry:repeat="dsProducts"
spry:setrow="dsProducts" spry:select="selected" spry:hover="hover"
>{name}</li>
</ul>
Display by grades:
<ul spry:region="dsByGrade" id="gradeRegion">
<li class="grade " spry:repeat="dsByGrade"
spry:setrow="dsByGrade" spry:select="selected" spry:hover="hover"
>{grade}</li>
</ul>
Content.
Display the features content:
<ul spry:region="dsFeatures">
<li spry:repeat="dsFeatures">{subject} <br />
{image}</li>
</ul>
Any idea on how to go about this or pointer to an example
would be appreciated.
~Cheers

Answer 1

Does anybody have idea?