asked on

Spry XML data set and spry tabbed panel problem

Hi everyone,

I wanted to use a spry xml data set to be used as the data to be pulled into a spry tabbed panel widget.

The data below is the information I have in an xml file. I wanted the value of the 'type' attribute (ie. <packageType type="Level 1">) to populate the name of the tabs, and then the 'description' and 'price' nodes, as well as the 'name' attribute (ie. <image url="images/l2one.jpg" name="text here"></image>) to populate the content of the tabs.

As a starter, I tried doing the following:

<div id="TabbedPanels1" class="TabbedPanels" spry:region="dsLevels">
<ul class="TabbedPanelsTabGroup" spry:repeat="dsLevels" >
<li class="TabbedPanelsTab" tabindex="0" >Level 1</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent"> Content 3 </div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>

...but all this gave me was 4 correctly named tabbed panels but only one content region, ie. for the 'Level 1' tab.

If the above can be achieved, I wanted the data from the 'name' attribute (ie. the name of the image) to be a link which when clicked on would display the image drawn from the url attribute, (ie. <image url="images/l1one.jpg"...).

I don't even know if this is possible because it may required nested regions which I'm not even sure are supported, but does anyone know if this type of application is able to be done in Dreamweaver CS4 without going into the .js files (as my javascript coding is limited)?

Appreciate any advice.

<?xml version="1.0" encoding="UTF-8"?>
 
<packages>
 
	<packageType type="Level 1">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l1one.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 2">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l2one.jpg" name="text here"></image>
		<image url="images/l2two.jpg" name="text here"></image>
		<image url="images/l2three.jpg" name="text here"></image>
		<image url="images/l2four.jpg" name="text here"></image>
		<image url="images/l2five.jpg" name="text here"></image>
		<image url="images/l2six.jpg" name="text here"></image>
		<image url="images/l2seven.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 3">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l3one.jpg" name="text here"></image>
	</packageType>
 
	<packageType type="Level 4">
		<description> text here </description>
		<price> $XXX </price>
		<image url="images/l4one.jpg" name="text here"></image>
	</packageType>
</packages>

Open in new window

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CAE5942

ASKER

Thanks for the links.

I've just tried testing some code but when I preview in the browser I get the following error:

"Found a nested spry:region in the following markup. Nested regions are currently not supported.:

I'm not sure why it's saying they're not supported when the adobe tutorial uses them.

Do you know what's going on?

CAE5942

ASKER

I just tried adding a piece of code, ie.

<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryNestedXMLDataSet.js"></script>

...and this got rid of the error, however I"m still not getting the effect I"m looking for (see screenshot). All the tabs are stacked up one under the other and the content is to the right instead of being beneath each tab. The tabs are also not clickable.

Do you have any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="SpryAssets/SpryNestedXMLDataSet.js"></script>
<script type="text/javascript">
<!--
var dsPackages = new Spry.Data.XMLDataSet("dataSet.xml", "packages/packageType", {sortOnLoad: "@type", sortOrderOnLoad: "ascending"});
//-->
</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="oneColFixCtrHdr">
 
<div id="container">
  <div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
  <div id="mainContent">
<div spry:region="dsPackages">
  <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup" spry:repeat="dsPackages">
      <li class="TabbedPanelsTab" tabindex="0">{dsPackages::@type}</li>
      <li class="TabbedPanelsContent" tabindex="0">{dsPackages::price} | {dsPackages::description}</li>
      </ul>
    <ul class="TabbedPanelsContentGroup">
      <li class="TabbedPanelsContent">Content 1</li>
      <li class="TabbedPanelsContent">Content 2</li>
      </ul>
  </div>
</div>
</div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>

Open in new window

Picture-5.png

Jason C. Levine

Hard to say because I don't have your data so I can't really rebuild the page on this end to test. I would create multiple datasets, though. A master set and then a child dataset that gets filtered by the master.

CAE5942

ASKER

Okay, so I have the following code now:

{@type}

{price}

{description}

{image/@name}

... and it ends up looking like the attached screenshot.

The xml file code is below.

The css code wasn't touched, ie. it's the default css code that's rendered by the widget.

Do you think it could be a css issue with regard to why the panels are stacked as they are instead of being beside each other.

You mentioned a master set and then a child set - can you explain where this code would go if you think it would solve the problem?

Appreciate any further help.

<?xml version="1.0" encoding="UTF-8"?>
<packages>
	<packageType type="Level 1">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l1one.jpg" name="line of text1L1"></image>
	</packageType>
	<packageType type="Level 2">
		<description> text here </description>
		<price>$XXX</price>
		<image url="images/l2one.jpg" name="line of text1L2"></image>
		<image url="images/l2two.jpg" name="line of text2L2"></image>
		<image url="images/l2three.jpg" name="line of text3L2"></image>
		<image url="images/l2four.jpg" name="line of text4L2"></image>
		<image url="images/l2five.jpg" name="line of text5L2"></image>
		<image url="images/l2six.jpg" name="line of text6L2"></image>
		<image url="images/l2seven.jpg" name="line of text7L2"></image>
	</packageType>
	<packageType type="Level 3">
		<description> text here </description>
		<price>$XXX</price>
		<image url="images/l3one.jpg" name="line of text1L3"></image>
	</packageType>
	<packageType type="Level 4">
		<description> text here </description>
		<price>$XXX </price>
		<image url="images/l4one.jpg" name="line of text1L4"></image>
	</packageType>
</packages>

Open in new window

Picture-6.png

CAE5942

ASKER

For some reason, the code in the previous post didn't render above so I've pasted it below again.

Thanks

  <div spry:region="dsPackages">
    <div id="TabbedPanels2" class="TabbedPanels" spry:repeat="dsPackages">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">{@type}</li>
        </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
        <p>{price}</p>
        <p>{description}</p>
        <p>{image/@name}</p></div>
        </div>
    </div>

Open in new window

CAE5942

ASKER

Actually below is the current code - I forget to copy an extra closing div tag at the end.

    <div id="TabbedPanels2" class="TabbedPanels" spry:repeat="dsPackages">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">{@type}</li>
        </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
        <p>{price}</p>
        <p>{description}</p>
        <p>{image/@name}</p></div>
        </div>
    </div>
  </div>

Open in new window

CAE5942

ASKER

Thanks for this - I needed to close this question and reopen it again as I don't seem to be getting any further advice.