Dreamweaver - spry rating & repeating regions

Hi,
I'm trying to make a repeating region that contains a spry rating widget (I have downloaded the extension).
The problem is that I need to develop a way to automatically increase the ID of the spry rating.
The problem I am encountering is that only the first spry rating works properly. The remainder are displaying the data, but show only a text field. It appears that all are being repeated as
id="SpryRating1".
Does anyone have a way to increment the spry rating id for each element of the repeating region?
Thanks for yours replies,
Gabriel
PD: I have the same problem with the sustitution images. Does anyone have a solution?

This is very easy to do with a server-side language. Create a variable counter, and increase the counter each time the repeat region runs.

Similar Messages

Need to control page view to 20 from an html data source for a spry data repeating region

</style>
<script src="SpryAssetPan/SpryData.js" type="text/javascript"></script>
<script src="SpryAssetPan/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssetPan/SpryPagedView.js" type=”text/javascript”></script>
<script type="text/javascript">

</script>
</head
<body>
<div id="wrapper">
<div spry:region="ds1">
    <div id="repeatOne" spry:repeat="ds1">
      <p>{Photo_2}<br />
      {Item}</p>
    </div>
Here you can find the file that I need to Create Paged View data set navigation
http://www.hohmangraphics.com/masterProductGuide/WrapAround_art/joestest_2.html

Thank you,
With some adjustments it worked, see source code below,
<script src="SpryAssetPan/SpryData.js" type="text/javascript"></script>
<script src="SpryAssetPan/SpryHTMLDataSet.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="SpryAssetPan/SpryPagedView.js"></script>
<script language="JavaScript" type="text/javascript">
var ds1 = new Spry.Data.HTMLDataSet("wrapAround_master2.html", "wrap2", {distinctOnLoad: true, sortOnLoad: "Item", sortOrderOnLoad: "ascending"});
var pv1 = new Spry.Data.PagedView( ds1 ,{pageSize: 10});
//-->
</script>
</head>
<body>
<div id="wrapper">
<p>
<input type="button" value="First" onclick="pv1.firstPage();" />
<input type="button" value="Prev" onclick="pv1.previousPage();" />
<input type="button" value="Next" onclick="pv1.nextPage();" />
<input type="button" value="Last" onclick="pv1.lastPage();" />
<br />
</p>
<div spry:region="pv1 ds1">
    <div id="repeatOne" spry:repeat="pv1">
      <p>{Photo_2}<br />
      {Item}</p>
    </div>

Help with Spry Rating Widget within a Spry Repeating Region

My link http://www.youthinkyougotitbad.com
This is a long question, but it seems to me if answered somewhere it could help alot of people in the spry community creating comment boards as it uses three important spry widgets: rating, repeating, and tabbed panels. I am trying to use spry rating widget within a spry repeating region within a spry tabbed panel with xml. I was trying to go with the pulse light script (http://forums.adobe.com/message/3831721#3831721) but Gramps told me about the spry rating widget. But I have ran into a couple more problems. First, I couldnt find that much information on the forums or online about how to do the php page with the spry rating widget. None of these have any information on how to do it:
http://labs.adobe.com/technologies/spry/articles/rating_overview/index .html
http://labs.adobe.com/technologies/spry/articles/data_api/apis/rating. html
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.ht ml
And it seems that the official examples are so poor (or I am just ignorant, which def could be a possiblity) it shows
to set the initial rating value from the server, but uses a static value of 4
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample.html
<span id="initialValue_dynamic" class="ratingContainer">
         <span class="ratingButton"></span>
         <span class="ratingButton"></span>
         <span class="ratingButton"></span>
         <span class="ratingButton"></span>
         <span class="ratingButton"></span>
         <input id="spryrating1_val" type="text" name="spryrating1" value="4" readonly="readonly" />
         <span class="ratingRatedMsg sample">Thanks for your rating!</span>
</span>
<script>
var initialValue_dynamic = new Spry.Widget.Rating("initialValue_dynamic", {ratingValueElement:'spryrating1_val'});
</script>
I finally found a site that has the php and mysql setup.
http://www.pixelplant.ro/en/articles/article-detail/article/adobe-widgets-for-download.htm l
But its not perfect. It has the same problem that I ran into with Pulse light, that you had to use php echo within the spry repeating region to set the initial value from the server:
<span id="spryrating1" class="ratingContainer">
         <span class="ratingButton"></span>
            <input type="text" id="ratingValue" name="dynamic_rate" value="<?php echo $row['average']?>"/>
        </span>
        <script type="text/javascript"
            var rating1 = new Spry.Widget.Rating("spryrating1", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id=spryrating1&val=@@ratingValue@@'});
        </script>
So instead, I tried with three of my panels (www.youthinkyougotitbad.com) to get the average rating from xml by using the following queries:
Recent
Returns the blurts in most recent order along with average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC
Wet Eyed
Returns the blurts in highest ratings order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r Desc
Dry Eyed
Returns the blurts in lowest rating order along with the average rating
SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt AND ratings.rating_value > 0.1 Group By Id_blurt ORDER BY average_r
These all return the correct xml in the correct order.And they return the average rating of each blurt which I can send to my page with xml.
My first question is that I dont know how to configure the query on my fourth panel Empathized & Advised the same way because it already has a Group By for the Comment Id.
SELECT `Comment`.id_Blurt, COUNT(*) as frequency, Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt, DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt, `Comment` WHERE Blurt.Id_blurt = `Comment`.id_Blurt GROUP BY `Comment`.id_Blurt ORDER BY COUNT(*) DESC";
Not sure if you guys need more information to understand that all, if so just ask.
So after I get my average value through xml to the first three panels, I set my spry repeating region up like this:
(Blurt panel)
<div spry:region="pv1" spry:repeatchildren="pv1">
           <div class="blurtbox">
            
            <h3> "{pv1::Blurt}"</h3>
            <p> Blurted from {pv1::Location} at {pv1::Date}</p>
            <p>Empathize or Advise about {pv1::Name}'s Blurt #<a href="detailblurt.php?blurtid={pv1::Id_blurt}"> {pv1::Id_blurt}</a></a></p>
           <span id="{pv1::Id_blurt}" class="ratingContainer">
            <span class="ratingButton"></span>
            <span class="ratingButton"></span>
            <span class="ratingButton"></span>
            <span class="ratingButton"></span>
            <span class="ratingButton"></span>
            <span class="ratingRatedMsg">Thank You! Your tears have been tallied.</span>
            <input type="text" id="ratingValue" name="dynamic_rate" value="{pv1::average_r}"/>
        </span>
        <script type="text/javascript">
            // overview of available options and their values:
            // http://labs.adobe.com/technologies/spry/articles/rating_overview/index.html
            var rating1 = new Spry.Widget.Rating("{pv1::Id_blurt}", {ratingValueElement:'ratingValue', afterRating:'serverValue', saveUrl: 'save.php?id={pv1::Id_blurt}&val=@@ratingValue@@'});
        </script>
             <br/>
           </div>
          </div>
Ok, it registers the right vote in the database with the right blurt id each time. But I am having two problems so far:
One, even though {pv1::average_r} returns the correct average through xml, it doesn't show the initial rating value for each of the repeating blurts. It seems to show the first one correct, and then just repeat that same value to the other ones that follow. I just dont understand since it can get the correct server value right after you vote (afterRating:'serverValue), that I can't manipulate spryrating.js in some way that I could just replace 'ratingValue' in ratingValueElement:'ratingValue' with something to give me the initial server value.
Two: Is even more mysterious to me, if you play around with voting on the site, sometimes you are unable to vote on different blurts. Its weird. It seems like that the javascript is completely off just on those blurts. And sometimes its a whole row, sometimes none. But so far its never a problem on the first tabbed panel (Recent), only on the other three. As far as I know, the coding is exactly the same in each tab's repeating region except for the different xml input.
And, now on the live server, sometimes the pics of tears used to voting dont show up until you click.
Any help on those three questions (how to query the fourth panel, how to show the initial server value, and the glitches with voting) would be greatly appreciated!! I looked pretty hard on adobe forums and other sites, and didnt see much on how to really use the spry rating widget with php and xml.
Thanks!!

Update:
Ok, the first query on the Recent tab doesnt work for me because it wont show unless its already voted, and since these are supposed to be new blurts, that kind of breaks the whole site:
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date, ratings.rating_id, Avg(ratings.rating_value) as average_r FROM ratings Left Join Blurt On ratings.rating_id = Blurt.Id_blurt Group By Id_blurt ORDER BY Blurt.`Date` DESC";
So I replaced it with what I originally had.
"SELECT Blurt.Id_blurt, Blurt.Name, Blurt.Location, Blurt.Blurt,Blurt.`Date`,DATE_FORMAT(Blurt.`Date`, '%l:%i %p on %M %D, %Y') as Date FROM Blurt ORDER BY Blurt.`Date` DESC";
But this doesn't provide me with the initial average rating:(

Spry repeat Region

I am creating a staff page for our school using Dreamweaver
CS3. I can create a spry region and a repeat region and the staff
image and its caption get displayed but he repeat ocuurs in a
stacked format. Is there any way to configure the repeat to occur
like a table (so many columns and rows concept). Thanks.
Darren

<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="50%"><div spry:region="{ds1}">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td spry:repeat="ds1">{thumbnails}</td>
</tr>
</table></div></td>
<td><div spry:detailregion="ds1">{Detail
Region}</div></td>
</tr>
</table>
I'm not sure how this would work for alot of thumbnails, but
it works for what I used it for (4 thumbnails across the
row)

Spry collapsible panel - repeating region

Hi,
I'm trying to make a repeating region that contains a spry
collapsable panel.
The problem is that i need to develop a way to automatically
increase the ID of the spry panel.
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".
Does anyone have a way to increment the Tab & Content
ID's?
On another forum, somebody has suggested using the following
PHP - although having never used PHP before, I am uncertain as to
where I insert this into my code:

bump

Nested Repeat Regions in Dreamweaver 8

I am waying the option of upgrading from MX to 8 or just
getting MX Looper to do nested repeat regions. Any advice? Are
nested repeat regions built into Dreamweaver 8?

SmellyPete wrote:
> I've got a problem with nested templates in my site. I
don't think it's an
> error or bug as such, just a really strange limitation,
that I hope there is a
> work around for.
>
> I've setup a menubar with a repeating table region in a
template. Then I laid
> out the content (editable) regions in a nested template.
The system works
> really well in dreamweaver, if you want to add a menu
item, you do so to the
> parent template, and then it filters through out the
site.
>
> The problem is that when I try to edit the pages as a
client with contribute
> (even as an administrator) it will not allow access to
edit a .dwt file, even
> if it has editable regions in it. This means I can't use
contribute to add an
> item to the menubar, because I need to be able to edit
the nested template. I'm
> sure it's possible, because a .dwt is just an .htm file
with a different hat on.
>
> There must be some way of doing this. As soon as I read
about the template
> system I immediately thought this would be one of it's
strengths, and would be
> very surprised if the contribute user were limited to
making changes on every
> individual page.
>
> PS. I'm sure someone will suggest that I just move the
repeating region into
> the nested template. I could do this, but the whole
point is that with one
> change I want it to will filter down through the whole
site. I thought maybe
> SSI might be the answer, but would that just confuse
contribute even more?
>
It seems to me the whole point of using Contribute is to keep
users from
changing basic site configurations such as the menu. Use
Dreamweaver or
one of the simple HTML editors around.

Limiting Number of Rows in spry:repeat Region

With the code...
<tr spry:repeat="dsTitles">
<td width="60%">{title}</td>
<td width="14%">{author}</td>
<td width="9%">{date}</td>
</tr>
... How do I limit the number of rows that will be displayed
in this repeat region
to just 5, instead of displaying all 25 rows stored in the
XMLDataSet (dsTitles)?
Thanks!
Oscar

Hey Oscar,
Glad that works for you.
Kin and I were thinking that {ds_RowNumber} might be better
for that particular looping, but you get the idea.
http://labs.adobe.com/technologies/spry/articles/data_set_overview/index.html
That was our first overview doc and it was definitive at the
time. We no longer update it but it's a good intro to Spry.
You can find the built in data references in that doc,
granted almost at the very bottom.
The API doc
http://labs.adobe.com/technologies/spry/articles/data_api/index.html
is a good start but we still have a lot to add to it. I have
plans for it for sure.
We are doing a big push for 1.6 towards progressive
enhancement, unobtrusive js and things like that.
Expect docs and samples and some cool utilities to come out
this summer and for 1.6.
And we won't charge for it, but we also won't return any
cash-laden envelopes... ;)
Let us know how to improve any part of Spry.
Thanks,
Don

Spry Repeat Regions

Is it possible to restrict repeat regions in Spry to ie. 5 or
10 records per page. I am sure we could do this before on ASP
pages.

Yes this is possible, Spry has a special class for that
called: SpryPagedView
http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
^ sample

Usin Spry$$ in spry:repeat regions

Hi,
I'm not sure whats happening here but i'll try to be
detailed.
I am using spry to make a master page set.
on a region i have
quote:
var observer = { onPostUpdate: function(notifier, data) { var
r = Spry.$$(".changeStatusLink").addEventListener("click",
changeStatus, true); } };
where the element selector is
quote:
<td align="center" valign="middle" nowrap="nowrap"
spry:setrow="ds1 {ds_rowID}">[EDIT] | [<a
id="statusLink{ds_RowID}" class="changeStatusLink">CHANGE
STATUS</a>] | [DELETE]</td>
in a
spry:repeat region
Now on a "click" the selector is able to trigger the
changeStatus function....but for some reason
only the first row's {ds_RowID} of the
spry:repeat is being captured when the function
"changeStatus"
is
quote:
function changeStatus(e){
var row = ds1.getCurrentRow();
var id = row['@id'];
alert(id);
is it the fact that because the "class" is being repeated it
is not picking up the actual "element" that triggered the event? or
is there something wrong with the ds1.getCurrentRow?Text

the spry:repeat IS on the
<tr>
I don't have a URL
but the code is...
quote:

Spry widget / php recordsets / repeatable regions

okay this deals with the spry collapsiblepanel widget in cs3.
I'm testing the ability to create a news feed with this feature
paired with a php recordset. My issue involves the repeated widgets
not working like the first one. I know it probably is a result of
the region thats being repeated / the collapsible panel. Look at
the code and this test site that i've worked up.
test website the
code is below...i've commented out the start and end of the
repeated region.

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

Dreamweaver error on inserting an XSLT repeat region

I am getting a Dreamweaver JavaScript error message when
attempting to insert an XSLT Repeat Region under certain
circumstances in Dreamweaver 8.0.2 for Windows. I have posted a
full description on
David
Powers's friends of ED forum, but I wanted to report it here as
well for confirmation.
When creating a Repeat Region in an XSLT fragment, the
following error message appears:
While executing objetTag in XSLT_ForEach.htm, the following
JavaScript error(s) occurred: At line 502 of the file "C:\Program
Files\Macromedia\Dreamweaver
8\Configuration\Objects\Server\serverObjectsCommon.js": Type Error:
dwscripts.getBalancedSelection is not a function
This error is entirely reproducible,
but not if any PHP file has been open at any point since the
XSLT fragment was opened.
To illustrate:
0) If Dreamweaver is running, exit completely.
1) Start Dreamweaver.
2) Create a new XSLT fragment, or open an existing one.
3) In design view, place a field from an XML source into your
fragment, select it, and then try to create an XSLT repeat region.
The error message described above appears. Dismiss the error
dialog, but keep the XSLT fragment document open.
4) Create a new PHP document (or open an existing one), then
close it.
5) Back in your XSLT fragment, try again to create the repeat
region. Now it works.
If you open the PHP document
before creating the XSLT fragment, you still get the error
-- even if you leave the PHP document open. If you open the PHP
document
after you open the XSLT fragment, you do not get the error
-- even if you close the PHP document before you create the XSLT
repeat region.
It looks like
the key is to touch a PHP document at some point
after the XSLT fragment is opened. So that is the
workaround. My guess is that one of the included internal
JavaScript scripts is not being sourced until a PHP document is
opened, but this is probably not intended behavior.
-jon

quote:
Originally posted by:
Newsgroup User David Powers
The only way that I know of is to disable all extensions,
make sure that
Dreamweaver is working correctly, and then enable extensions
one by one
until the error occurs again. You have then found the guilty
party. You
could also try it the other way round - disabling extensions
one by one
until it works OK. If you have recently installed a new
extension, that
may be the one to test first.
Another thing you can try is this:
You can try this to see if it solves your problem:
Close Dreamweaver.
Find C:\Documents and Settings\<username>\Application
Data\Macromedia\Dreamweaver
8\Configuration\WinFileCache-*.dat
Delete the file (it's in a hidden folder, so you need to have
enabled
the option to see hidden files and folders).
Restart DW. See if your problem has gone away.
Thanks, David.
Actually, what I was looking for was a way to trace what
Dreamweaver is doing behind the scenes -- what scripts it is
loading, and what errors those scripts throw. I had already tried
uninstalling all my extensions and deleting my entire user
configuration directory (not just the WinFileCache file), to no
avail. I also tried running the "Repair" program from the Studio
installation, but the problem persisted.
So I resorted to uninstalling and reinstalling Dreamweaver
from scratch from the original Studio 8 CD.
Amazingly, even before I applied the 8.0.2 (or 8.0.1) update or
installed any hotfixes or extensions, the same error message
appeared.
Before reinstalling, I took care to delete my user
configuration directory (actually, I deleted the entire
C:\Documents and Settings\{Username}\Application
Settings\Macromedia\Dreamweaver 8/ tree. I took care to
uninstall Dreamweaver 8 completely using the uninstall program, and
I confirmed that the
C:\Program Files\Macromedia\Dreamweaver 8\ directory was
gone before reinstalling. In the outside chance that there was a
problem with my install CD itself, I even tried installing twice --
once from the install-image Studio 8 CD I downloaded from the
Macromedia Store after upgrading from MX 2004, and once from the
official Studio 8 CD I ordered by mail afterwards.
So it's not my installation, it's not the hotfix, and it's
not any of the extensions I've installed. It's a bona-fide bug.
(What I can't figure out is why David was not able to reproduce
it.)
Next?
-jon

Dreamweaver CS6 Repeat Region Selection Error

I have recently used Repeat Region many times, but this time an error started showing up:
"Before inserting this item, make a selection on the page."
I already made the selection but the problem continues.
I restarted Dreamweaver and the computer but nothing happened.

Nevermind it worked i don't know how...

Tabbed panels repeat region in cms displays 2nd item as a block of content

Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
          width: 700px;
          background-color: #E6E6E6;
          border: .1em solid #999;
          padding-top: 5px;
          padding-right: 5px;
          padding-left: 5px;
          height: auto;
          margin-bottom: 30px;
#item_description {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.3em;
          color: #333;
          background-color: #FFF;
          height: 30px;
          border-bottom-width: .1em;
          border-bottom-style: dotted;
          border-bottom-color: #333;
          font-weight: bold;
          margin-bottom: 10px;
#price {
          margin-top: 5px;
          float: right;
          width: 150px;
          background-color: #EAEAEA;
          border: 0.1em solid #CCC;
.BOLDTEXT {
          font-weight: bold;
          text-align: center;
          color: #FFF;
.BOLDTEXT_PRICE {
          color: #333;
#engine_spec {
          float: left;
          width: 190px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: .75em;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
#top_price {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          color: #099;
          float: right;
          width: 150px;
          font-weight: bold;
          text-align: right;
#top_price {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.4em;
          color: #099;
#overview_picture {
          height: 150px;
          width: 200px;
          background-color: #CCC;
          float: left;
          margin-right: 10px;
          margin-top: 5px;
.BOLDTEXT_blackprice {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.4em;
          color: #099;
#smallprint {
          font-family: Arial, Helvetica, sans-serif;
          font-size: .5em;
          color: #666;
          margin-top: 2px;
table tr td {
          font-size: 0.75em;
          font-family: Arial, Helvetica, sans-serif;
.specwhite {
          color: #FFF;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1em;
          font-weight: bold;
#reserve {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          font-weight: bold;
          color: #FFF;
          background-color: #099;
          width: 140px;
          float: right;
          margin-top: 10px;
          padding: 5px;
          text-align: center;
          border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Overview</li>
      <li class="TabbedPanelsTab" tabindex="0">Description</li>
      <li class="TabbedPanelsTab" tabindex="0">Images</li>
      <li class="TabbedPanelsTab" tabindex="0">Specification</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <div id="item_description"><perch:content id="Title1" label="Title" type="text" />
          <div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
        </div>
        <div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
        <div class="engine_spec" id="engine_spec">
          <table width="100%" border="0" cellpadding="5" cellspacing="7">
            <tr>
              <td width="35%" bgcolor="#EAEAEA">Year of Make</td>
              <td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Current Miles</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Engine Size</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Body Colour</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
            </tr>
            <tr>
              <td bgcolor="#EAEAEA">Transmission</td>
              <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
            </tr>
          </table>
        </div>
        <div id="price">
          <table width="150" border="0" cellspacing="9">
            <tr>
              <td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
              <td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
            </tr>
            <tr>
              <td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
              <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
            </tr>
            <tr>
              <td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
              <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
            </tr>
          </table>
        </div>
        <div id="reserve">Reserve Motorhome</div>
      </div>
      <div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
      <div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
    <td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
      <div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
          this.element = this.getElement(element);
          this.defaultTab = 0; // Show the first panel by default.
          this.tabSelectedClass = "TabbedPanelsTabSelected";
          this.tabHoverClass = "TabbedPanelsTabHover";
          this.tabFocusedClass = "TabbedPanelsTabFocused";
          this.panelVisibleClass = "TabbedPanelsContentVisible";
          this.focusElement = null;
          this.hasFocus = false;
          this.currentTabIndex = 0;
          this.enableKeyboardNavigation = true;
          this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
          this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
          Spry.Widget.TabbedPanels.setOptions(this, opts);
          // If the defaultTab is expressed as a number/index, convert
          // it to an element.
          if (typeof (this.defaultTab) == "number")
                    if (this.defaultTab < 0)
                              this.defaultTab = 0;
                    else
                              var count = this.getTabbedPanelCount();
                              if (this.defaultTab >= count)
                                        this.defaultTab = (count > 1) ? (count - 1) : 0;
                    this.defaultTab = this.getTabs()[this.defaultTab];
          // The defaultTab property is supposed to be the tab element for the tab content
          // to show by default. The caller is allowed to pass in the element itself or the
          // element's id, so we need to convert the current value to an element if necessary.
          if (this.defaultTab)
                    this.defaultTab = this.getElement(this.defaultTab);
          this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
          if (ele && typeof ele == "string")
                    return document.getElementById(ele);
          return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
          var children = [];
          var child = element.firstChild;
          while (child)
                    if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                              children.push(child);
                    child = child.nextSibling;
          return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
          if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
                    return;
          ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
          if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
                    return;
          ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
          if (!optionsObj)
                    return;
          for (var optionName in optionsObj)
                    if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                              continue;
                    obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
          if (this.element)
                    var children = this.getElementChildren(this.element);
                    if (children.length)
                              return children[0];
          return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
          var tabs = [];
          var tg = this.getTabGroup();
          if (tg)
                    tabs = this.getElementChildren(tg);
          return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
          if (this.element)
                    var children = this.getElementChildren(this.element);
                    if (children.length > 1)
                              return children[1];
          return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
          var panels = [];
          var pg = this.getContentPanelGroup();
          if (pg)
                    panels = this.getElementChildren(pg);
          return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
          ele = this.getElement(ele);
          if (ele && arr && arr.length)
                    for (var i = 0; i < arr.length; i++)
                              if (ele == arr[i])
                                        return i;
          return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
          var i = this.getIndex(ele, this.getTabs());
          if (i < 0)
                    i = this.getIndex(ele, this.getContentPanels());
          return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
          return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
          return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
          try
                    if (element.addEventListener)
                              element.addEventListener(eventType, handler, capture);
                    else if (element.attachEvent)
                              element.attachEvent("on" + eventType, handler);
          catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
          if (e.preventDefault) e.preventDefault();
          else e.returnValue = false;
          if (e.stopPropagation) e.stopPropagation();
          else e.cancelBubble = true;
          return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
          this.showPanel(tab);
          return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
          this.addClassName(tab, this.tabHoverClass);
          return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
          this.removeClassName(tab, this.tabHoverClass);
          return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
          this.hasFocus = true;
          this.addClassName(tab, this.tabFocusedClass);
          return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
          this.hasFocus = false;
          this.removeClassName(tab, this.tabFocusedClass);
          return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
          var key = e.keyCode;
          if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
                    return true;
          var tabs = this.getTabs();
          for (var i =0; i < tabs.length; i++)
                    if (tabs[i] == tab)
                              var el = false;
                              if (key == this.previousPanelKeyCode && i > 0)
                                        el = tabs[i-1];
                              else if (key == this.nextPanelKeyCode && i < tabs.length-1)
                                        el = tabs[i+1];
                              if (el)
                                        this.showPanel(el);
                                        el.focus();
                                        break;
          return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
          var stopTraversal = false;
          if (root)
                    stopTraversal = func(root);
                    if (root.hasChildNodes())
                              var child = root.firstChild;
                              while (!stopTraversal && child)
                                        stopTraversal = this.preorderTraversal(child, func);
                                        try { child = child.nextSibling; } catch (e) { child = null; }
          return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
          var self = this;
          Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
          Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
          Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
          if (this.enableKeyboardNavigation)
                    // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
                    // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
                    // by default.
                    // Find the first element within the tab container that has a tabindex or the first
                    // anchor tag.
                    var tabIndexEle = null;
                    var tabAnchorEle = null;
                    this.preorderTraversal(tab, function(node) {
                              if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
                                        var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                                        if (tabIndexAttr)
                                                  tabIndexEle = node;
                                                  return true;
                                        if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                                                  tabAnchorEle = node;
                              return false;
                    if (tabIndexEle)
                              this.focusElement = tabIndexEle;
                    else if (tabAnchorEle)
                              this.focusElement = tabAnchorEle;
                    if (this.focusElement)
                              Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
                              Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
                              Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
          var tpIndex = -1;
          if (typeof elementOrIndex == "number")
                    tpIndex = elementOrIndex;
          else // Must be the element for the tab or content panel.
                    tpIndex = this.getTabIndex(elementOrIndex);
          if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
                    return;
          var tabs = this.getTabs();
          var panels = this.getContentPanels();
          var numTabbedPanels = Math.max(tabs.length, panels.length);
          for (var i = 0; i < numTabbedPanels; i++)
                    if (i != tpIndex)
                              if (tabs[i])
                                        this.removeClassName(tabs[i], this.tabSelectedClass);
                              if (panels[i])
                                        this.removeClassName(panels[i], this.panelVisibleClass);
                                        panels[i].style.display = "none";
          this.addClassName(tabs[tpIndex], this.tabSelectedClass);
          this.addClassName(panels[tpIndex], this.panelVisibleClass);
          panels[tpIndex].style.display = "block";
          this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
          var tabs = this.getTabs();
          var panels = this.getContentPanels();
          var panelCount = this.getTabbedPanelCount();
          for (var i = 0; i < panelCount; i++)
                    this.addPanelEventListeners(tabs[i], panels[i]);
          this.showPanel(this.defaultTab);
})(); // EndSpryComponent
>CSS file
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
          position: relative;
          top: 1px;
          float: left;
          background-color: #DDD;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: sans-serif;
          font-size: small;
          font-weight: bold;
          margin-top: 0px;
          margin-right: 1px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 4px;
          padding-right: 10px;
          padding-left: 10px;
          padding-bottom: 4px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
          background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
          background-color: #FFF;
          color: #333;
          border-top-color: fff;
          border-right-color: fff;
          border-bottom-color: fff;
          border-left-color: fff;
          border-color: fff;
          outline-color: fff;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #F9F9F1;
          height: auto;
          margin-bottom: 3px;
          border: .1px solid #999;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
          overflow: hidden;
          padding: 4px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
          background-color: #FFF;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 0.75em;
          color: #333;
          padding: 20px;
          clear: both;
          margin-bottom: 5px;
          height: auto;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
          float: left;
          width: 10em;
          height: 20em;
          background-color: #EEE;
          position: relative;
          border-top: solid 1px #999;
          border-right: solid 1px #999;
          border-left: solid 1px #CCC;
          border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
          border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
          clear: none;
          float: left;
          padding: 0px;
          width: 30em;
          height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
          overflow: visible !important;
.TabbedPanelsContentGroup {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
.TabbedPanelsContent {
          overflow: visible !important;
          display: block !important;
          clear:both !important;
.TabbedPanelsTab {
          overflow: visible !important;
          display: block !important;
          clear:none !important;
          height: 100%;
#TabbedPanels1 {
          height: auto;
          padding-top: 5px;
          background-color: #EAEAEA;
          width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASE

I think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps

How can I use a Looper inside a Repeat Region?

I have a Dreamweaver standard Repeat Region applied to a HTML table containing two horizontal loopers. The HTML table is to display a list of company contacts for our members. The loopers display find for the first company but after that they stop. To key the loopers to the company Im using a trick mentioned by Günter Schenk in this thread: http://www.adobeforums.com/webx/.59b524b4/5. He calls it a sub query; at times I use to help myself by using some sort of "sub query" like the following
<br />
<br />Ive linked my looper recordset to the recordset used for the Repeat Region. Heres one of the looper queries:
<br />
<br />$KTColParam1_rsContactFeatures = "-1";
<br />if (isset($_SESSION["kt_login_id"])) {
<br />$KTColParam1_rsContactFeatures = $_SESSION["kt_login_id"];
<br />}
<br />mysql_select_db($database_RNW, $RNW);
<br />$query_rsContactFeatures = sprintf("SELECT DISTINCT list_feature.description_feature, company.id_company, contact_cnt.idpremissions_cnt FROM (((company LEFT JOIN company_to_feature ON company_to_feature.idcompany=company.id_company) RIGHT JOIN list_feature ON list_feature.id_list_feature=company_to_feature.idlistfeature) LEFT JOIN contact_cnt ON contact_cnt.idcompany_cnt=company.id_company) WHERE company.id_company='".$row_rsContactAll['id_company']."' AND company_to_feature.id_feature is not null AND contact_cnt.idpremissions_cnt=%s ORDER BY company.id_company ASC ", GetSQLValueString($KTColParam1_rsContactFeatures, "int"));
<br />$rsContactFeatures = mysql_query($query_rsContactFeatures, $RNW) or die(mysql_error());
<br />$row_rsContactFeatures = mysql_fetch_assoc($rsContactFeatures);
<br />$totalRows_rsContactFeatures = mysql_num_rows($rsContactFeatures);
<br />
<br />This is my link in both quires: WHERE company.id_company='".$row_rsContactAll['id_company']."'
<br />
<br />Heres the code for the connected looper:
<br />
<br /><?php<br />do { // horizontal looper version 3<br />?>
<br />
<br />
<br />
<br />
<br />As I said this works fine for the first item in the list but then it quits. Heres a screen shot of what I dont want: http://www.retirenw.com/images/help/looper_inside_repeat_region.gif
<br />
<br />Is there anyway to change the php for the loopers to make this work?
<br />
<br />Thanks for your help
<table>
<tr>
<td>
<img src="../images/bullet.gif" width="8" height="14" />
</td>
<td>
<?php echo $row_rsContactFeatures['description_feature']; ?>
</td><?php <br />$row_rsContactFeatures = mysql_fetch_assoc($rsContactFeatures);<br />if (!isset($nested_rsContactFeatures)) { <br />$nested_rsContactFeatures= 1;<br />}<br />if (isset($row_rsContactFeatures) && is_array($row_rsContactFeatures) && $nested_rsContactFeatures++ % 1==0) {<br />echo "</tr><tr>";<br />}<br />} while ($row_rsContactFeatures); //end horizontal looper version 3<br />?>
</tr>
</table>

I found an easy solution.
I moved my looper quires out of my head and into my bodyinside the repeat region (the Looper Wizard puts the quires in the head). I put the quires right before my looper code. Finally, I had to make sure my conditional regional code came after the looper quires but before the looper code.

Repeating regions not working in Contribute 6.5

Repeating regions that work inside Dreamweaver aren't working in Contribute 6.5 where I get the error message "You can't add items to repeating regions because the draft's parent template is missing or not available to users in your role. Please contact the website administrator"
My role is administrator and this happens on pages based on single templates and nested templates as well as local files and pages published on a site.
The problem seems to run through several different versions of Contribute going back at least 5 years but I haven't found a solution yet.

For me the problem is different. I don't even get to to see the add/delete buttons, so I can not add och delete a new region! I am tryong to chat with the adobe support right now, but I am not feeling very succesful. Is anyone from Adobe reading this? (It is working in CS5)

Dreamweaver - spry rating & repeating regions

Similar Messages

Maybe you are looking for