Skip to main content
Known Participant
July 14, 2009
Question

Spry Tabs and php page display

  • July 14, 2009
  • 1 reply
  • 1469 views

Hi,

Can anyone point me in the right direction here. I have a page with two tabs. The second tab displays a php page when clicked to open however the php page does not dispay correctly within the tab but outside of the tab it it works fine.

The problem I am facing is that the php page has certain select fields, one of which must open only when the first one has been selected. This can be seen at http://www.leisureafrica.co.za/res where the PROVINCE select box only opens if the COUNTRY field of South Africa is selected.

When this is seen in the main page i.e. through tab 2 inside http://www.leisureafrica.co.za the PROVINCE select box is visble when the tab opens?? How do I get the php page in the tab to open correctly??

My main page code as follows:

******* code start********

<?php
session_start();
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="templates/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.links {color: #CCCC66}
-->
</style>
<link href="la.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #000066;
}
-->
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" src="SpryAssets/SpryUtils.js"></script>

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="65%" height="430" border="3" align="center" bordercolor="#666666" bgcolor="#FFFFFF">
  <tr>
    <td><table width="100%" height="349" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
      <tr>
        <td width="523" height="72"><div align="left"><img src="Images/logo.jpg" width="259" height="72" /></div></td>
        <td width="1" height="72"> </td>
        <td width="200
        " height="72" border="2" bordercolor="#000033"><div align="center"><img src="images/la<?php echo rand(1,10); ?>.jpg" width="159" height="72"></div></td>
      </tr>
      <tr>
        <td height="23" colspan="3" bgcolor="#993300"><div align="center" class="links">
          <div align="right" style="font-size: 8pt;">
          <div align="center"><b><?php echo date("l d M Y"); ?></b></div>
        </div>
        </div></td>
      </tr>
      <tr align="center">
        <th height="189" colspan="3" background="images/feature.jpg"> </th>
      </tr>
    </table>
      <hr align="center" width="100%" size="2" class="brown" />
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
          <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','res/index.php');">Tab 2</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent" id="one">Content 1</div>
          <div class="TabbedPanelsContent" id="two"> Content 2</div>
        </div>
      </div>
      <p> </p></td>
  </tr>
  <tr>
    <td><div align="center" class="style1">Copyright &copy; 2009 Leisure Africa - All Rights Reserved</div></td>
  </tr>
</table>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>
****** code ends********

This topic has been closed for replies.

1 reply

DwFAQ
Participating Frequently
July 14, 2009

Your problem is most likely due to a file path confliction for your referenced javascript used for the dependant drop-down.

gyesdahlAuthor
Known Participant
July 14, 2009

Thanks www.DwFAQ.info I have tried re-referencing and even putting the js in the home page but to no avail... not sure what else I can do ...

gyesdahlAuthor
Known Participant
July 14, 2009

The page you have referenced in spry tab 2 is now http://www.leisureafrica.co.za/2index.php but when you visit that page the providence option is always displayed.

In http://www.leisureafrica.co.za/2index.php change

<script src="usableforms1.js"></script>

to

<script type="text/javascript" src="usableforms1.js"></script>

If that doesn't work I have another recommendation


Ok.. made the changes you recommend but still the same. I moved all the files out of the "res" folder to the root hoping it would make a difference and hence the 2index.php file