Making Spyr Dynamic

Report · May 30, 2008

Have searched for but could not find so I am asking:
Can someone clue me into how I can use a Collapsible Panel or Accordion Panel in a PHP page using a mySQL recordset and display the data from the recordset in the widget and have the widget work in a repeat region?

I am currently using a PHP page with a mySQL recordset and the data appears to be properly passed, I am just haven't been able to dynamically id (name) the Panel elements; and that, I think, is the problem.
The problem I am encountering is that only the first Collapsible Panel works properly. The remainder are displaying the data, but will not open and close when their tabs are clicked. It appears that all are being repeated as id="CollapsiblePanel1" (I am trying to use the Collapsible if possible rather than the Accordion, but either would work)

Does anyone have a way either javascript or php or other technique to increment the Tab & Content ID's?
I am attaching (I hope) a portion of the code i am testing with. Sorry, it's on a local server on my machine.

An example of something I think I want to do can be seen at Adobe example page :

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html

Any direction would be appreciated.
Thanks,
nitefisher1
Attach Code

<title>collapsible</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<?php do { ?>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><?php echo $row_rsPanel['gTitle']; ?> <?php echo $row_rsPanel['gAges']; ?></div>
<div class="CollapsiblePanelContent">
<div id=".ssCollapseLeft">
<p><?php echo $row_rsPanel['gTeachers1']; ?> <?php echo $row_rsPanel['gTeachers2']; ?> </p>
</div>
<div id=".ssCollapseRight">
<p><?php echo $row_rsPanel['gLocation']; ?></p>
<p><?php echo $row_rsPanel['gDate']; ?></p>
<p><?php echo $row_rsPanel['gAttend']; ?></p>
<p><?php echo $row_rsPanel['gContact']; ?></p>
</div>
<div id=".ssCollapseClear">
<p>
</p>
</div>
</div>
</div>
<?php } while ($row_rsPanel = mysql_fetch_assoc($rsPanel)); ?><script type="text/javascript">

</script>
</body>
</html>
<?php
mysql_free_result($rsPanel);
?>

Report · May 30, 2008

nitefisher wrote:
> Does anyone have a way either javascript or php or other technique to
> increment the Tab & Content ID's?

All you need to do is to create a counter and output the counter in place of the "1" in CollapsiblePanel1.

What I would do to make this quick and easy would be to move the constructor code (the script tag and its contents) into your repeat region. This will allow you to not have to have multiple repeat regions (as well as a recordset "reset"). Then change your code to something like the following:

<title>collapsible</title>
<script src="SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet"
type="text/css" />
</head>

<body>
<?php
$counter = 1;
?>
<?php do { ?>
<div id="CollapsiblePanel1" class="CollapsiblePane<?php echo $counter; ?>">
<div class="CollapsiblePanelTab" tabindex="0"><?php echo
$row_rsPanel['gTitle']; ?> <?php echo $row_rsPanel['gAges']; ?></div>
<div class="CollapsiblePanelContent">
<div id=".ssCollapseLeft">
<p><?php echo $row_rsPanel['gTeachers1']; ?> <?php echo
$row_rsPanel['gTeachers2']; ?> </p>
</div>
<div id=".ssCollapseRight">
<p><?php echo $row_rsPanel['gLocation']; ?></p>
<p><?php echo $row_rsPanel['gDate']; ?></p>
<p><?php echo $row_rsPanel['gAttend']; ?></p>
<p><?php echo $row_rsPanel['gContact']; ?></p>
</div>
<div id=".ssCollapseClear">
<p>
</p>
</div>
</div>
</div>
<script
type="text/javascript">

</script>
<?php
$counter++;
?>
<?php } while ($row_rsPanel = mysql_fetch_assoc($rsPanel)); ?>
</body>
</html>
<?php
mysql_free_result($rsPanel);
?>

Or instead of using the script block, you could try a Collapsible Panel group. Basically, you'd wrap around all of your panels (which you'd still need the counter for that) a div:
<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
all your panel creation code here
</div>

Then in a script block at the bottom of the page:
<script language="JavaScript" type="text/javascript">
var cpg1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1");
</script>

Check out the Spry sample page for more info on the panel group (this isn't an option in the Insert bar, but it is available in the Spry framework itself):
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSample.html

Not sure where you searched or have asked your question, but dynamic type questions are generally better handled in the App Dev forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=263&entercat=y

And perhaps ask questions that are specific to Spry in the Spry forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602

HTH
--
Danilo Celic
| http://blog.extensioneering.com/
| Adobe Community Expert

Report · May 30, 2008

Sorry about the search...and thanks for the Spry Forum link ... did not know that existed.
I am still new to the Adobe Forums and all of the intricacies.
Thank you Danilo...I will try these fixes and see what becomes. I am certain they will be of help.

Thanks again,
nitefisher1