Linking to specific spry tabbed panel - code not working

Question

Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername1" -->
<div align="center" class="style3 style5">Player
name</div>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic1" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo1" -->
<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto1" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><!--
TemplateBeginEditable name="playername2" --><span
class="style5">Player name</span><!--
TemplateEndEditable --></div>
<p align="center"><!-- TemplateBeginEditable
name="playerpic2" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo2" -->
<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable --></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto2" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername3" -->
<p align="center" class="style3 style6 style4">Player
name</p>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic3" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo3" -->
<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto3" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername4" -->
<div align="center" class="style3 style4
style6">Player name</div>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic4" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo4" -->
<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto4" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.

Answer 1

quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs..