javascript controlled CSS menus and persistence with php

[mbeals]

I've been playing with this issue for a while and I think I just need a fresh perspective to find an elegant solution.

 

I have a site, in which I load the content of the site into the index page via a php include statement.  IE, the body looks like:

 

<?php include 'accesscontrol.php'; ?>
<script type="text/javascript" src="helpscript.js"></script>
<link href="helpcss.css" rel="stylesheet" type="text/css" />

  <div id="header">
	<ul>
		<li class='selected' id='support' ><a href="#" onclick="changeTab('support')">Support</a></li>
		<li id='network'><a href="#" onclick="changeTab('network')">Network</a></li>
		<li id='cable'><a href="#" onclick="changeTab('cable')">Cable</a></li>
		<? if($_SESSION['group']>=2){ echo '<li id="admin"><a href="#" onclick="changeTab(\'admin\')">Admin</a></li>'; } ?>

	</ul>
</div>
<div id="links">
  
	<div id='supportli' class='selected'><a href="index.php?site=techsupport">Support Calls (afterhours)</a> | <a href="index.php?site=techsupportadv">Advanced Search</a> 
	  | <a href="index.php?site=callreport">Support Calls (business hours)</a> | <a href="index.php?site=custreport">Log New Call</a></div>
	  
	<div id='networkli' class='unselected'><a href="index.php?site=statusreport">Network Health </a> | <a href="index.php?site=propinforeport">Property Info </a> | <a href="index.php?site=modemlist">Modem Status Report</a> | <a href="index.php?site=modemtrbl">Modem Search</a> | <a href="index.php?site=CMTS">CMTS Inventory</a> | <a href="index.php?site=logentry">Log Event</a></div>

	<div id='cableli' class='unselected'> <a href="index.php?site=PrintList">Reciever Pick List</a></div>

	<div id='adminli' class='unselected'><a href="index.php?site=userman">Manage Users</a> | <a href="index.php?site=PrintList">Manage Properties</a></div>

</div>
</div>
<div id='mainContent'> 

<?php
$site = $_GET["site"];

if ($site == ''){
$site=techsupport;
}

include $site.".php";

?>  
</div>
<br>
</body>
</html>

 

So new pages are loaded by calling the page name (minus the php extension) as the argument to the $site variable.  This makes it so that I don't have to repeat the common parts of the site onto every new page... sort of like using a frame set, but better. 

 

This works great, but the issue I'm facing is with the menu.  The menu consists of the elements within the list block.  I use CSS to transform that block into a horizontal menu.  Below this is a div containing 4 more divs.  One for each option of the menu.  Within these divs are links to new pages.  Clicking on one of the menu items calls a piece of javascript that changes the class of the menu items and these divs such that the selected menu item is highlighted and the corresponding div of links becomes visible.  This part of the site works fine.  The issue I'm having is that when you select one of the links, it reloads the index.php page (add the proper content in the include section), but 'forgets' the status of the menu.  So say I open the 'admin' tab and select "user management'.  When that link loads, the menu reverts back to having the 'support' tab open.

 

So I need some way of passing along what tab (menu) is open when the link is loaded.  The trick is that this selection is made completely client side, so I can't just pass a session variable or something like that (unless javascript can set php session variables).  I could just append the argument to the link, but I'm hoping for something a touch more elegant and flexible then that.

 

any ideas?

[mbeals]

i found a quick solution, although I'm not 100% happy with it.

 

In the javascript that changes alters the CSS of the divs to make the menu dynamic, I added a few lines to write the current selected tab to a cookie.  Then when the page loads, it checks for the cookie to set the active tab and visible menu.

 

again...not ideal, but it does work.

[DarkWater]

That's the only other way to interact Javascript with PHP, really. >_>