Master Detail in an Accordian - Spry

I am trying to use multiple datasets (1 to populate each
accordian tab) and those data to be used to populate 1 detail
region. The accordian tabs work, but the detail region does not
seem to pull the data and populate correctly.
Below is the code, any help is glady appreciated. I am really
new to spry and am a bit confused here.
Thanks,
txnskr
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml",
"gallery/photos/photo");
</script>
<script type="text/javascript">
var dsGallery1 = new Spry.Data.XMLDataSet("photos1.xml",
"gallery/photos/photo");
</script>
<script type="text/javascript">
var dsGallery2 = new Spry.Data.XMLDataSet("photos2.xml",
"gallery/photos/photo");
</script>
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<link href="../global.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="apDiv1">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Co-Chairs</div>
<div class="AccordionPanelContent"> WWCC Thumb Pics
<div spry:region="dsGallery" spry:repeat="dsGallery"
spry:setrow="dsGallery"><table border="0">
<tr >
<td >
<img src="../Images/Pictures/Thumbs/{@thumbpath}"
class="thumbs"
onclick="dsGallery.setCurrentRow('{ds_RowID}');"/>
</td>
<td>{@desc}</td>
</tr>
</table>
</div>
</div></div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Committee A</div>
<div class="AccordionPanelContent">Committee A
Thumbs<div spry:region="dsGallery1" spry:repeat="dsGallery1"
spry:setrow="dsGallery1"><table border="0">
<tr >
<td >
<img src="../Images/Pictures/Thumbs/{@thumbpath}"
class="thumbs"
onclick="dsGallery1.setCurrentRow('{ds_RowID}');"/>
</td>
<td>{@desc}</td>
</tr>
</table></div></div></div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Committee B</div>
<div class="AccordionPanelContent">Committee B Thumbs
<div spry:region="dsGallery2" spry:repeat="dsGallery2"
spry:setrow="dsGallery2"><table border="0">
<tr >
<td >
<img src="../Images/Pictures/Thumbs/{@thumbpath}"
class="thumbs"
onclick="dsGallery2.setCurrentRow('{ds_RowID}');"/>
</td>
<td>{@desc}</td>
</tr>
</table></div>
</div>
</div>
</div>
<div id="apDiv2"><div spry:detailregion="dsGallery
dsGallery1 dsGallery2">
<img src="../Images/Pictures/{@path}"
><br/>{@desc}
</div></div></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Hi,
I couple of things.
When you say:
<div spry:detailregion="dsGallery dsGallery1
dsGallery2"> <img src="../Images/Pictures/{@path}"
><br/>
{@desc} </div>
</div>
{@desc} refers to only the first data set listed in the
detail region; in your case, 'dsGallery'.
If you want the detail region to refer to other data sets,
you have to write it like '{dsGallery2::@desc}'
But you want that detail region {@desc} to refer to any of
the data sets that you clicked on.
To do that, we have a Shell Data Set. Rather than explaining,
the sample shows you how it works:
http://labs.adobe.com/technologies/spry/samples/data_region/DataSetShell_accordion.html
Let us know if you have more questions:
Don

Similar Messages

Master/detail layout - how to have 'detail' hidden by default.

The 'master/detail layout' option for spry datasets are great but how can I get the page to load with all the 'details' hidden until the user selects from the 'Master' column to reveal the details?

Hiya,
Don't know whether you are still looking for a solution, but if you are, please take a look at:
"Using URL Parameters to Control Data Regions"
I used the info there to create a Master/Detail page at
http://www.myosanthe-bernhard-huber.com/html/fotobergtraining.php
(which calls its data from an HTML DataSet)
The detail region is empty when the page first loads because I've used SpryURLUtils to 'listen' for a url parameter so that I can load a specific row's content from an external link (eg http://www.myosanthe-bernhard-huber.com/html/fotoalbum.php which is also made from the the same dataset).
A side result is that If the parameter isn't included in the url when the page loads, the detail region remains empty.
The relevant code from the <head> of the page is:
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMasterDetail_foto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
This may not be the best or easiest way (I'm a beginner myself), and I haven't yet worked out how to move back to the top of the page when a master-link is clicked, but this may be useful for you.
Best regards,
Len

IE6 not working with Spry Master Detail

I cannot get spry to work with IE6. I am most interested in
this master detail issue (code listed below). I am building this
for a internal gov't application, and the only browser they allow
is IE6.
The spry data set loads, all of the questions show on the
left hand side, but clicking on the question does nothing. I had
the same issue with collapsible panels, accordian etc. It works
fine on Firefox
Switching to another browser is not an option.
Click on the question to see the answer.
-------------------------------------------Code not
working-----------------------------------------
<div class="MasterDetail">
<div spry:region="faq" class="MasterContainer">
<div class="MasterColumn" spry:repeat="faq"
spry:setrow="faq" spry:hover="MasterColumnHover"
spry:select="MasterColumnSelected">{Question}</div>
</div>
<div spry:detailregion="faq" class="DetailContainer">
<div class="DetailColumn">{Answer}</div>
</div>
<br style="clear:both" />
</div>
</div>
</div>
<div id="bottom"></div>
</div>

Actually, I am using data of type HTML.
I am also finding that I have no problem running the script
off of a disk, BUT when I run it off of IIS, there is a problem.
All other scripts seem to work, so not sure it is a mime
type.

How Do I: Bind a YUI Calendar Widget to a Spry Master Detail Region?

Hello All,
Does anyone know how to bind a YUI Calendar widget to a Spry
master detail region? I have the dataset, yui calendar inserted but
no clue how to bind the two so my dataset populates the calendar
(Highlights dates that have a event) and when a date in the
calendar is clicked it shows in the details section.
I have found a tidbit or two via google but they don't deal
with the new yui cs4
widget. I have seen some video on adove tv that touches on
inserting the yui calendar into a spry dataset but not how to bind
the two together...
Any thoughts on this would be greatly appreciated.

You have to write some code that sets up a select callback on
the YUI side of things, and then set the current row of the data
set that matches that date.
Something like this:
var cal1 = new YAHOO.widget.Calendar("cal1","YUICal1");
cal1.render();
cal1.selectEvent.subscribe(function(type, args, obj)
// Get the selected date string from cal1.
var selectedDate = cal1.getSelectedDates()[0].getDate();
// Find the first row in the data set that has the
// selected date in it's "date" column.
var row = ds1.findRowsWithColumnValues({"date":
selectedDate}, true);
// If we have a matching row, make it the current row for
the data set.
if (row)
ds1.setCurrentRow(row.ds_RowID);
}, cal, true);
--== Kin ==--

Spry Accordion default panel in Master Detail Page

Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
    <div class="AccordionPanelContent">
        <table width="385" border="0" class="AccordionPanel" id="content1">
          <?php do { ?>
            <tr>
            <td >
               <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
               </td>
            </tr>
            <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
        </table>
    </div>
</div>
<script type="text/javascript">

</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!

PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben

Spry insert master/detail layout Can't get more than two columns?

Ive been trying to get more than two columns just experimenting with spry data sets and can't with the layout option "insert master/detail layout"
What am I doing wrong?
<!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/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMasterDetail.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var ds1 = new Spry.Data.HTMLDataSet("benefitsdata.html", "bizben", {firstRowAsHeaders: false});
</script>
</head>
<body>
<div align="center">
<div class="MasterDetail">
    <div spry:region="ds1" class="MasterContainer">
      <div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{column0}</div>
    </div>
    <div spry:detailregion="ds1" class="DetailContainer">
      <div class="DetailColumn">{column1}</div>
      <div class="DetailColumn">{column2}</div>
      <div class="DetailColumn">{column3}</div>
    </div>
    <br style="clear:both" />
</div>
</div>
</body>
</html>

Hello,
in addition to Sudarshan's statement about the discontinued support: In my SPRY library I found this "html_dataset_sample". Maybe it could help you. Here the source code:
<!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/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div spry:region="ds1">
<table>
<tr align="center" valign="middle">
   <th width="100" spry:sort="column0">Name</th>
    <th width="100" spry:sort="column1">Class</th>
   <th width="100" spry:sort="column2">Length(m)</th>
   <th width="100" spry:sort="column3">Crew Size</th>
   <th width="100" spry:sort="column4">Crew 1</th>
</tr>
<tr align="center" valign="middle" spry:repeat="ds1">
   <td width="100"><p>{column0.1}{column0.2}{column0.3}</td>
     <td width="100">{column1}</td>
   <td width="100">{column2}</td>
   <td width="100">{column3}</td>
   <td width="100">{column4}</td>
</tr>
</table>
</div>
</body>
</html>
Hans-Günter

Spry Master Detail from two HTML tables?

I'm trying to use two spry tables generated from html on the same page.I would like to set up an advaned master detail region where the "tbl_adrs" (contains Multiple addresses) references the "tbl_provider" (contains a provider name and the unique identifier 'ProNo'). Is this possible with spry data set from html tables? All examples reference spry tables from XML. If it is possible, here is the HTML to look at.
Thanks in advance.
John
</style>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<table width="300" border="0" id="tbl_provider">
      <tr>
        <th scope="col">Provider</th>
        <th scope="col">ProNo</th>
      </tr>
      <?php do { ?>
        <tr>
          <td><?php echo $row_rs_provider['BigName']; ?></td>
          <td><?php echo $row_rs_provider['ProNo']; ?></td>
        </tr>
        <?php } while ($row_rs_provider = mysql_fetch_assoc($rs_provider)); ?>
    </table>
    <p> </p>
    <div spry:region="ds_provider ds_adrs">
      <table>
        <tr>
          <th spry:sort="Provider">Provider</th>
          <th spry:sort="ProNo">ProNo</th>
        </tr>
        <tr spry:repeat="ds_provider" spry:odd="odd" spry:even="even" spry:hover="hover" spry:select="selected">
          <td>{Provider}</td>
          <td>{ProNo}</td>
        </tr>
      </table>
      <p>{ds_adrs::ProNo}{ds_adrs::ID}</p>
      <p>{ds_adrs::Group}</p>
      <p>{ds_adrs::Complex}</p>
      <p>{ds_adrs::Institution}</p>
      <p>{ds_adrs::Street}</p>
      <p>{ds_adrs::City}</p>
      <p>{ds_adrs::Phone}</p>
      <p>{ds_adrs::Fax}</p>
    </div>
    <p> </p>
    <p> </p>
    <table width="300" border="0" id="tbl_adrs">
      <tr>
        <th scope="col">ProNo</th>
        <th scope="col">ID</th>
        <th scope="col">Group</th>
        <th scope="col">Complex</th>
        <th scope="col">Institution</th>
        <th scope="col">Street</th>
        <th scope="col">City</th>
        <th scope="col">Phone</th>
        <th scope="col">Fax</th>
        <th scope="col">County</th>
      </tr>
      <?php do { ?>
        <tr>
          <td><?php echo $row_rs_adrs['ProNo']; ?></td>
          <td><?php echo $row_rs_adrs['ID']; ?></td>
          <td><?php echo $row_rs_adrs['Group']; ?></td>
          <td><?php echo $row_rs_adrs['Complex']; ?></td>
          <td><?php echo $row_rs_adrs['Institution']; ?></td>
          <td><?php echo $row_rs_adrs['Street']; ?></td>
          <td><?php echo $row_rs_adrs['Adrs_Comp']; ?></td>
          <td><?php echo $row_rs_adrs['Phone']; ?></td>
          <td><?php echo $row_rs_adrs['Fax']; ?></td>
          <td><?php echo $row_rs_adrs['County']; ?></td>
        </tr>
        <?php } while ($row_rs_adrs = mysql_fetch_assoc($rs_adrs)); ?>
    </table>

Moved to the Spry forum.

Spry Tabbed Panels and Master/ Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
Thanks.
Tony

Hi Tony,
Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
    <p> </p>
   <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
        <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
        <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
        <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
            <tr>
              <td width="80"><strong>Feedback Number</strong></td>
              <td><strong>Days attended</strong></td>
              <td><strong>Arrived by</strong></td>
              <td><strong>Arrival arrangements</strong></td>
              <td><strong>Expectations met</strong></td>
              <td><strong>Ticket price</strong></td>
              <td><strong>Zip code</strong></td>
            </tr>
.................... rest of table probably your PHP repeat area
              </tr>
          </table> .... end feedback table tag
          <div spry:region="dsAllFeedback">
            <table>
               <tr>
                <th spry:sort="Feedback_Number">Feedback Number</th>
                <th spry:sort="Days_attended">Days attended</th>
                <th spry:sort="Arrived_by">Arrived by</th>
                <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                <th spry:sort="Expectations_met">Expectations met</th>
                <th spry:sort="Ticket_price">Ticket price</th>
                <th spry:sort="Zip_code">Zip code</th>
              </tr>
              <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                <td>{Feedback_Number}</td>
                <td>{Days_attended}</td>
                <td>{Arrived_by}</td>
                <td>{Arrival_arrangements}</td>
                <td>{Expectations_met}</td>
                <td>{Ticket_price}</td>
                <td>{Zip_code}</td>
              </tr>
            </table>
          </div>
          <br />
          <table border="0">
I hope this helps.
Ben

Spry Tabbed Panel and Master/Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each page, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page.
Thanks.
Tony

Hi Tony,
Have a look here http://labs.adobe.com/technologies/spry/samples/data_region/PagingSample.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
If you need further assistance, go to the Spry Forum http://forums.adobe.com/community/labs/spry
I hope this helps.
Ben

How to move elements within the master region of a Master/Detail spry data set?

Hi there,
I am unsure of how to move the different items within the master region of a master/detail spry dataset. The default style is such that if I include 3 or more elements e.g. Thumb, etc., they are stacked vertically :
How do I move them so that they can be positioned differently? The look I am going for is one where the thumb image is positioned to the left while the other items are stacked alongside it so that the end effect for the master region would look like this:
I greatly appreciate the help! Thanks!

This is the complete page
<!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>Check :: Fashion+Lifestyle</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMasterDetail_final.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContainer">
    <div id="adBanners">
        <div id="halfBanner"><a href="#" onClick="document.getElementById('adRollover').style.visibility='visible';"><img src="images/banner_half_1.jpg" alt="Half Banner" width="237" height="90" /></a></div>
        <div id="leaderboardBanner"><a href="#"><img src="images/banner_leaderboard_1.jpg" width="728" height="90" alt="Leaderboard Banner" /></a></div>
        <div class="clearFloats"></div>
    </div>
    <div id="mainHeader">
        <div id="homepageLink"><a href="index.html"><img src="images/spacer.gif" width="400" height="100" /></a></div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="feature.html">FEATURES</a></li>
            <li><a href="#">FASHION</a></li>
            <li><a href="calendar.html" class="on">CALENDAR</a></li>
            <li><a href="#">VIDEO</a></li>
            <li><a href="blog.html">BLOG</a></li>
        </ul>
    </div>
    <div class="MasterDetail">
      <div class="DetailContainer" id="event" spry:detailregion="cal4">
        <div class="DetailPicture">{Picture}</div>
        <div class="DetailColumn DetailTitle">{What}</div>
        <div class="DetailColumn"><div class="DetailLabel">WHEN:</div> {When}
        </div>
        <div class="DetailColumn"><div class="DetailLabel">WHERE:</div> {Where}
        </div>
        <div class="DetailColumn">{Details}</div>
      </div>
      <div id="calHeader"><p><img src="images/calendar_hdr.gif" width="492" height="100" /></p></div>
      <div spry:region="cal4" class="MasterContainer" onclick="MM_effectAppearFade(this, 1000, 0, 100, false); MM_effectBlind('event', 1000, '0%', '100%', false);">
        <div class="MasterColumn" spry:repeat="cal4" spry:setrow="cal4" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><div class="MasterColumnPicture">{Thumb}</div>
          <div class="MasterColumnTitle">{What}</div>
          <div class="MasterColumnText"><div class="DetailLabel">WHEN:</div> {When}</div>
          <div class="MasterColumnText"><div class="DetailLabel">WHERE:</div> {Where}</div>
          <div style="clear:both"></div>
        </div>
      </div>
      <br style="clear:both" />
    </div>
</div>
<div id="footer">
    <div class="text">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2008 Adobe All rights reserved. The material on this site may not be reproduced, distributed, transmitted, cached, or otherwise used, except with the prior written permission of Adobe is a trademark owned by Adobe.</div>
</div>
<div id="adRollover" style="visibility: hidden;">
<script language="javascript">
    if (AC_FL_RunContent == 0) {
        alert("This page requires AC_RunActiveContent.js.");
    } else {
        AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
            'width', '536',
            'height', '479',
            'src', 'watch_ad',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'transparent',
            'devicefont', 'false',
            'id', 'watch_ad',
            'bgcolor', '#ffffff',
            'name', 'watch_ad',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'watch_ad',
            'salign', ''
            ); //end AC code
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="536" height="479" id="watch_ad" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="watch_ad.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
    <param name="wmode" value="transparent" /><embed src="watch_ad.swf" quality="high" bgcolor="#ffffff" width="536" height="479" name="watch_ad" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</noscript>
</div>
<script type="text/javascript">

</script>
</body>
</html>

How to set up a master/detail Spry select

Hello, I was trying to build a master/detail select using Spry following the example in the samples folder, but I didn't succed. I think I'm pretty close. I'm using two datasets from two diffrent xml files. The problem is that I don't know how to set a filter probably. Thanks so much.
This is my code:
<script type="text/javascript">

</script>
</head>
<body>
<form>
Rubro:
<span spry:region="dsRubro" id="rubroSelector">
<select spry:repeatchildren="dsRubro" name="rubroSelect" onchange="document.forms[0].categoriaSelect.disabled = true; dsRubro.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{idConsultaRubro}" selected="selected">{descripcion}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{idConsultaRubro}">{descripcion}</option>
</select>
</span>
Categoria:
<span spry:region="dsCategoria" id="categoriaSelector">
<select spry:repeatchildren="dsCategoria" id="categoriaSelect" name="categoriaSelect">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{idConsultaCategoria}" selected="selected">{descripcion}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{idConsultaCategoria}">{descripcion}</option>
</select>
</span>

Use XPath to filter the data in the second dataset as follows
<!DOCTYPE html>
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var dsRubro = new Spry.Data.XMLDataSet("rubro_xml.php", "root/row");
dsRubro.setColumnType("idConsultaRubro", "number");
var dsCategoria = new Spry.Data.XMLDataSet("categoria_xml.php[idConsultaRubro=-1]", "root/row");
dsCategoria.setColumnType("idConsultaRubro", "number");
dsCategoria.setColumnType("idConsultaCategoria", "number");
dsCategoria.setColumnType("orden", "number");
function newXPath(cat){
dsCategoria.setXPath('root/row[idConsultaRubro='+cat+']');
dsCategoria.loadData();
</script>
</head>
<body>
<form>
Rubro:
<span spry:region="dsRubro" id="rubroSelector">
<select spry:repeatchildren="dsRubro" name="rubroSelect" onchange="newXPath(this.value)">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{idConsultaRubro}" selected="selected">{descripcion}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{idConsultaRubro}">{descripcion}</option>
</select>
</span>
Categoria:
<span spry:region="dsCategoria" id="categoriaSelector">
<select spry:repeatchildren="dsCategoria" id="categoriaSelect" name="categoriaSelect">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{idConsultaCategoria}" selected="selected">{descripcion}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{idConsultaCategoria}">{descripcion}</option>
</select>
</span>
</body>
</html>
I hope this helps.
Ben

Using Spry Master Details And Flash Videos

I orginally posted this in the Dreamweaver forum but found
this one and figured it was a more appropriate place.
Hi, I am using the Spry Master Detail set to Dynamically load
a flash player into a detail area. Works great in Firefox but
doesn't load the player in IE.
http://www.3screensart.com/default5.cfm
I have tried various methods
http://www.3screensart.com/default6.cfm
but still isn't working as intended.
I could go back to iFrames but really don't want to do that
either.

Did you ever get this to work? I am trying to do something
similar with no success. I tried swfobject and other ways of
getting the parameters through Spry to Flash to no avail. Something
in Spry is mangling my embed on the way to IE whenever it's
included in a Spry region.
I am reluctantly being forced to find something other than
Spry due to IE.

Table appears for a second before spry Master/Detail loads

Hi!
I'm using the Spry Master/Detail function on a page to display an interactive version of the table on the same page. On browser load, the table is briefly displayed before it is replaced by the Spry interactive table. Is there any way to avoid this? It looks kinda hokey.
ps I know I could avoid it by putting the table on another page, but then it wouldn't be searchable.
Thanks in advance.
Mignonne

Sorry for butting in, Hi Beth,
Considering the number of images that have to be loaded before the data can be displayed, the page is quite fast.
There are a couple of things that can be done to make it load faster and to give it a feel that is is loading faster.
To make it run faster consider
compressing components with GZip, see here http://developer.yahoo.com/performance/rules.html#gzip
placing expiry headers on images, css and js see here http://developer.yahoo.com/performance/rules.html#expires
place the reference to js files further down, see here http://developer.yahoo.com/performance/rules.html#js_bottom
use a Content Delivery Network, see here http://developer.yahoo.com/performance/rules.html#cdn
To make it feel as though it runs faster, hide the contents until the data has been processed and issue a message or loading bar to that extent.
1. add the following style rule to make use of the SpryHiddenRegion feature
.SpryHiddenRegion {visibility:hidden;}
2. change the first part of the Master/Detail region to
<div class="MasterDetail">
    <div spry:region="dsepimediums">
     <div spry:state="loading" align="center"><h2>Loading data, please wait ...</h2></div>
      <div spry:state="ready">
        <div class="MasterContainer">
          <div class="MasterColumn" spry:repeat="dsepimediums" spry:setrow="dsepimediums" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><span spry:content="{Plant_Name}"></span></div>
        </div>
      </div>
    </div>
    <div spry:detailregion="dsepimediums" class="DetailContainer SpryHiddenRegion">
      <div class="DetailColumn"><h2>{Plant_Name}</h2></div>
Here we are making use of the various states that Spry goes through see here http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSFC2EB69F-9F15-4005-A993-B7667 BA7EB75.html
We are also doing our best to hide our data until fully available see here http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSFC2EB69F-9F15-4005-A993-B7667 BA7EB75.html
I hope this helps.

I need to understand how to get my master-detail html dataset to refresh.

My SPRY master-detail dataset does not refresh. Following is a description of what I have and what I am trying to do.
The data source is an embedded table. Each row of the table has two fields: a thumbnail (for the master section) and a full size image (for the detail section). Each "tr" tag has a class which identifies the category of photos to be displayed. This feature of the applicaation is loacated on a panel of a SPRY tabbed panel object. I have links from other pages to open specific tabbed panels. this part works just fine.
To select the various categories of photos I have a radio button group. By default the first category.in the group is selected and when the page initially loads it selects the correct photos and the thumbnails are displayed in the master section and the first full size photo displays in the detail section. All is well to this point.
Each radio button has an "onClick" behavior which calls a javascript function with an argument specifying the desired category. The javascript function uses "window.location.assign" to refresh the page passing URL parameters to open the appopriate tab (this works properly) and to pass along the selected category. The URL parameters show up in the browser just as they should, but the page does not seem to refresh. I have disabled the caching of the data and that doesn't help. I put an alert() function in to examine the incoming URL parameters but it does not process at all. This convinces me that the page just isn't reloading.
Any help will be appreciated.

I have something similar, but instead of clicking a radio button, I click the tab of a Spry TabbedPanel widget. Clicking the tab activates a function that changes the XPath and reloads the data. All very simple.
function newXPath(thepath) {
ds1.setXPath(thepath);
ds1.loadData();
Incidently the above is for a SpryXMLDataSet.
For a SpryHTMLDataSet you would use setDataSelector("theDataSelector") or setRowSelector("theRowSelector"). For more info see here http://labs.adobe.com/technologies/spry/articles/html_dataset/index.html
I hope this helps.
Ben
PS. We try to help as much as possible. The best way for us to help you is to dispense with long stories and to supply an online URL so that we we see the issue in context.
PPS. I must admit, your description was spot on.

Master-detail list - how to spread over multiple columns

I am using the master-detail functionality to create a image viewer.
I have a long list of master thumbnails, and rather than having them go down the page in one column, I would like to make them spread over 2 or 3 columns before the detail column.
(example of format I am trying to achieve - http://www.franbainbridgephotography.com.au/gallery.html (I dont mind whether master thumbnails are on right or left of detail photo))
You can see my problem on http://www.wcwra.com/webpages/images.php
Is this possible with the master-detail functionality?
Thank you!

The brilliant David Powers has fixed this for me on the main forum (vw2ureg was v close). David's answer is :
There is no way of making a single dataset repeat in multiple columns, because it's simply one element being repeated over and over.
However, with a little out of the box thinking, you can do it quite easily with thumbnails. Instead of putting the master column repeat region in a block level element, use an inline element, <span>. Images are treated by browsers as inline elements, so this should work just fine. Change the following code from this:
<div spry:region="dsPhotos" class="MasterContainer">
    <div class="MasterColumn" spry:repeat="dsPhotos" spry:setrow="dsPhotos"
    spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Caption}</div>
</div>
to this:
<div spry:region="dsPhotos" class="MasterContainer">
    <span class="MasterColumn" spry:repeat="dsPhotos" spry:setrow="dsPhotos"
    spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{Caption}</span>
</div>
In your CSS, set the width of the MasterColumn class to the width of your thumbnails, and the width of MasterContainer so that it's wide enough to accommodate two or more thumbnails. The thumbnails will flow into the column two or three abreast.

Master Detail in an Accordian - Spry

Similar Messages

Maybe you are looking for