Spry Tabs and php page display

Report · Jul 13, 2009

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>

Report · Jul 13, 2009

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

Report · Jul 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 ...

Report · Jul 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

to

If that doesn't work I have another recommendation

Report · Jul 14, 2009

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

Report · Jul 14, 2009

The dependent drop down on 2index.php is working correctly now at least.

There are two things you could try: First change <body> to <body onLoad="prepareForm()"> on index.php because the form function is not loaded.

Option 2:

Replace index.php with this code. I made some changes adding the contents of 2index.php into the Content 2 div of the spry content and removed the onclick behavior from tab 2.

<?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>Home Page</title>
<link href="templates/styles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--
body {background-color: #000066;}

.links {color: #CCCC66}

-->

</style>

<link href="la.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="SpryAssets/SpryTabbedPanels.js"></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" />

<script type="text/javascript" src="usableforms1.js"></script>
<link href="bb.css" rel="stylesheet" type="text/css">
</head>

<body onLoad="prepareForm()">

<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">Tab 2</li> 

        </ul>

        <div class="TabbedPanelsContentGroup">

          <div class="TabbedPanelsContent" id="one">Content 1</div>

          <div class="TabbedPanelsContent" id="two"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="23"><img src="images/brdr-tl.gif"></td>
    <td width="0*" background="images/brdr-t2.gif" style="background-repeat: repeat-x;"></td>
    <td width="23"><img src="images/brdr-tr.gif"></td>
  </tr>
  <tr>
    <td valign="top" background="/res/images/brdr-l2-repeat.gif" style="background-repeat: repeat-y; background-position: left;"> </td>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="2" align="center"> </td>
        </tr>

      </table>
      <div align="right" style="font-size: 8pt;"><b>Tuesday 14 Jul 2009</b></div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="27%" valign="top">
          <form name="form1" method="post" action="index.php">
          <table width="200" bgcolor="#FAFAFA" border="0" cellspacing="2" cellpadding="2" style="border: 1px solid #CCCCCC;">
              <tr>
                <td bgcolor="#FF9933"><b>LOGIN</b></td>
              </tr>
              <tr>
                <td class="small"><b>Been Here Before?</b><br>
                    Login or <a href="register.php">register now</a> for the personal 
                    experience.</td>
              </tr>
              <tr>
                <td>
                  <table width="100%" border="0" cellspacing="2" cellpadding="0">
                    <tr>
                        <td class="small">Login Type</td>
                        <td><select name="logintype" style="width: 100px; height: 15px; font-size: 7pt;">
                              <option value="guest">Private Guest</option>
                              <option value="agent">Corporate / Agent</option>
                              <option value="venue">Establishment</option>
                          </select> </td>
                    </tr>
                    <tr>
                        <td class="small">Username</td>
                      <td>
                          <input type="text" name="username" style="width: 100px; height: 15px; font-size: 7pt;">
                        </td>
                    </tr>
                    <tr>
                        <td class="small">Password</td>
                      <td><input type="password" name="password" style="width: 100px; height: 15px; font-size: 7pt;"></td>
                    </tr>
                    <tr>
                        <td class="small"><a href="register.php">[register]</a></td>
                      <td align="right"><input type="submit" name="Submit" value="Login" style="font-size: 7pt;"></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            </form>

            <br>
            <table width="200" bgcolor="#FAFAFA" border="0" cellspacing="2" cellpadding="2" style="border: 1px solid #CCCCCC;">
              <tr> 
                <td bgcolor="#66CC33"><b>FEATURE</b></td>
              </tr>
              <tr> 
                <td><img src="images/shotleft.gif" width="160" height="62"></td>
              </tr>
              <tr> 
                <td><b>Zulu Kingdom Getaways from R222</b>!<br>
                  Take a short break and experience all the kingdom has to offer.</td>
              </tr>
            </table></td>
          <td width="73%">

          <form name="search" method="get" action="search.php">
          <table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>
                <td> </td>
                <td bgcolor="#F1F1F1" style="height: 20px; border: 1px solid #BBBBBB;"><b>Find Accommodation Here</b></td>
              </tr>
              <tr>
                <td width="18%"> </td>
                <td width="82%" style="border: 1px solid #BBBBBB;">
                    <table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#FAFAFA">
                      <tr> 
                        <td width="40%">Country</td>
                        <td width="60%"> <select name="country">
                            <option value="%" show="none">All</option>
                            <option value="Angola" show="none">Angola</option>
<option value="Botswana" show="none">Botswana</option>
<option value="Comoros" show="none">Comoros</option>
<option value="Kenya" show="none">Kenya</option>
<option value="Lesotho" show="none">Lesotho</option>
<option value="Madagascar" show="none">Madagascar</option>
<option value="Malawi" show="none">Malawi</option>
<option value="Maldives" show="none">Maldives</option>
<option value="Mauritius" show="none">Mauritius</option>
<option value="Mozambique" show="none">Mozambique</option>
<option value="Namibia" show="none">Namibia</option>
<option value="Reunion" show="none">Reunion</option>
<option value="Seychelles" show="none">Seychelles</option>
<option value="South Africa" show="provinces">South Africa</option>
<option value="Swaziland" show="none">Swaziland</option>
<option value="Tanzania" show="none">Tanzania</option>
<option value="Zambia" show="none">Zambia</option>
<option value="Zimbabwe" show="none">Zimbabwe</option>
                                            </select></td>
                      </tr>

                      <tr relation="provinces"> 
                        <td width="40%">Province</td>
                        <td width="60%"> <select name="province">
                            <option value="%">All</option>
                <option value="Kwazulu-Natal"">Kwazulu-Natal</option>
<option value="Eastern Cape"">Eastern Cape</option>
<option value="Western Cape"">Western Cape</option>
<option value="Orange Free State"">Orange Free State</option>
<option value="Gauteng"">Gauteng</option>
<option value="Mpumalanga"">Mpumalanga</option>
<option value="Northern Province"">Northern Province</option>
<option value="Northern Cape"">Northern Cape</option>
<option value="North West Province"">North West Province</option>
              </select></td>
          </tr>


                      <tr> 
                        <td>Type of Accommodation</td>
                        <td><select name="category">
                            <option value="%">Any Type</option>
                            <option value="Apartments">Apartments</option>
<option value="Backpacker">Backpacker</option>
<option value="Bed & Breakfast">Bed & Breakfast</option>
<option value="Bungalows">Bungalows</option>
<option value="Bush Camp">Bush Camp</option>
<option value="Cabanas">Cabanas</option>
<option value="Camping">Camping</option>
<option value="Caravan Park">Caravan Park</option>
<option value="Chalets">Chalets</option>
<option value="Cottages">Cottages</option>
<option value="Country Estate">Country Estate</option>
<option value="Country Lodge">Country Lodge</option>
<option value="Game Lodges">Game Lodges</option>
<option value="Golfing Estate">Golfing Estate</option>
<option value="Guest Farm">Guest Farm</option>
<option value="Guest House">Guest House</option>
<option value="Home Hire">Home Hire</option>
<option value="Hotel">Hotel</option>
<option value="Houseboat">Houseboat</option>
<option value="Hutted Camp">Hutted Camp</option>
<option value="Lodge">Lodge</option>
<option value="Motel">Motel</option>
<option value="Resort">Resort</option>
<option value="Self Catering">Self Catering</option>
<option value="Timeshare">Timeshare</option>
<option value="Youth Hostel">Youth Hostel</option>
                          </select></td>
                      </tr>
                      <tr> 
                        <td>Date of Arrival</td>
                        <td><select name="fromday">
                              <option value="00"> </option>
                              <option value="01">1</option>
                              <option value="02">2</option>
                              <option value="03">3</option>
                              <option value="04">4</option>
                              <option value="05">5</option>
                              <option value="06">6</option>
                              <option value="07">7</option>
                              <option value="08">8</option>
                              <option value="09">9</option>
                              <option value="10">10</option>
                              <option value="11">11</option>
                              <option value="12">12</option>
                              <option value="13">13</option>
                              <option value="14">14</option>
                              <option value="15">15</option>
                              <option value="16">16</option>
                              <option value="17">17</option>
                              <option value="18">18</option>
                              <option value="19">19</option>
                              <option value="20">20</option>
                              <option value="21">21</option>
                              <option value="22">22</option>
                              <option value="23">23</option>
                              <option value="24">24</option>
                              <option value="25">25</option>
                              <option value="26">26</option>
                              <option value="27">27</option>
                              <option value="28">28</option>
                              <option value="29">29</option>
                              <option value="30">30</option>
                              <option value="31">31</option>
                          </select>
                           <select name="frommonth">
                             <option value="00"> </option>
                             <option value="01">January</option>
                             <option value="02">February</option>
                             <option value="03">March</option>
                             <option value="04">April</option>
                             <option value="05">May</option>
                             <option value="06">June</option>
                             <option value="07">July</option>
                             <option value="08">August</option>
                             <option value="09">September</option>
                             <option value="10">October</option>
                             <option value="11">November</option>
                             <option value="12">December</option>
                          </select>
                           <select name="fromyear">
                             <option value="0000"> </option>
                             <option value="2005">2005</option>
                             <option value="2006">2006</option>
                          </select></td>
                      </tr>
                      <tr> 
                        <td>Date of Departure</td>
                        <td><select name="today">
                            <option value="00"> </option>
                            <option value="01">1</option>
                            <option value="02">2</option>
                            <option value="03">3</option>
                            <option value="04">4</option>
                            <option value="05">5</option>
                            <option value="06">6</option>
                            <option value="07">7</option>
                            <option value="08">8</option>
                            <option value="09">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                          </select>
                           <select name="tomonth">
                            <option value="00"> </option>
                            <option value="01">January</option>
                            <option value="02">February</option>
                            <option value="03">March</option>
                            <option value="04">April</option>
                            <option value="05">May</option>
                            <option value="06">June</option>
                            <option value="07">July</option>
                            <option value="08">August</option>
                            <option value="09">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                          </select>
                          <select name="toyear">
                            <option value="0000"> </option>
                            <option value="2005">2005</option>
                            <option value="2006">2006</option>
                          </select></td>
                      </tr>
                      <tr>
                        <td>No. of Guests</td>
                        <td><select name="noguests">
                            <option value="0">Any Number</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                          </select></td>
                      </tr>
                      <tr>
                        <td> </td>
                        <td align="right"><input type="submit" name="Submit" value="Go"></td>
                      </tr>
                    </table>

                  </td>
              </tr>
            </table>
<table><tbody id="waitingRoom"
      style="display: none"></tbody></table>

            </form> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="18%"> </td>
                <td width="82%"><b>Latest Establishments</b><br>
                  <a href="registerest.php"><font size="1">[Register Your Venue Here]</font></a><br>
                  <br>
                <table width="100%" cellpadding="0" cellspacing="2" border="0">
                  <tr>
           <td><a href="javascript:;" onClick="window.open('showvenue.php?id=4', '_blank', 'width=600,height=500,toolbar=0,location=0,status=0,menubar=0,resizable=0,scrollbars=1');"><img src="makepicfit.php?file=1.jpg&w=80&h=50" border="0" style="border: 1px solid #000000;"></a><br><font size="1"><b>Somerset Guest House</b><br>Durban<br>Bed & Breakfast</font></td>                </tr>
                </table>

                </td>
              </tr>
            </table>
            <br>

            </td>
        </tr>
      </table><br><br><br><br>
    </td>
    <td valign="top" background="images/brdr-r2-repeat.gif" style="background-repeat: repeat-y; background-position: right;"><img src="images/brdr-r2.gif" width="23" style="height: 100%"></td>
  </tr>
  <tr>
    <td><img src="images/brdr-bl.gif"></td>
    <td valign="top" class="small" align="center" background="images/brdr-b2.gif" style="background-repeat: repeat-x; background-position: bottom;">  </td>
    <td><img src="images/brdr-br.gif"></td>
  </tr>
</table><br></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>

Report · Jul 14, 2009

Perfect!!! Thanka a ton. So you basically combined the two index files?? I see you hardcoded the country names as well. I had them set to come out of a Mysql database as another form will allow vendors to register and thought that the best way.

Report · Jul 14, 2009

I didn't hand code anything I just copied everything in between <body> and </body> in 2index.php and put it in Content 2 in the content 2 spry div. Then as I mentioned I removed the onclick behavior from tab 2. Also I added the onload funtion to the body tag of index.php and put the css and js files from the <head></head> of 2index.php in the head of index.php so yeah basically I combined the pages. You could use MySQL in index.php and place the dynamic info in the content 2 div if you want to pull MySQL data into your spry tab.

Report · Jul 14, 2009

Got it !

Thanks once again for your time.. Much appreciate your help...Now I got to get the other 30 or so pages to play the game and get my sessions to work as I log in and not registerd ... will play around and see where I end up...

Report · Jul 14, 2009

I see you got it working using option 2.