dynamic menu updating problem [Archive]

sharper

May 11th, 2008, 08:00 PM

Greetings,

I have a dynamic menu built via PHP and styled in CSS.
very simple design, nested lists.

the menu is built inside the main php file which is a template for the entire site. evey anchor link in the menu fires an onclick event which triggers a few javascript functions that restyle the menu according to its state. (using css classes)

here is the problem:
when a link is pressed, the javascript functions update the menu as required, but then the entire page reloads. this causes the menu to be rebuilt, and all changes to its style are lost.

i've also tried disabling the default onclick event (via return false) , in which case the menu performs perfectly (except for redirecting to the links). I then tried adding an onload event in which the styling is done, supposedly after the page had finished loading, this doesn't work either.

am I missing something here?

thanks in advance,

sharper

PeejAvery

May 11th, 2008, 10:28 PM

Can you please post your outputted HTML so we can see it? Please remember to use [code] tags. Use them in the following manner.

[code]
Your code goes here.
[/code]

sharper

May 12th, 2008, 05:09 AM

here is the javascript code that updates the menu:

function update_menu(ul_id,a_obj)
{
//
}
//self.scrollTo(0,0);

function markCurrent(a_obj)
{
//mark current selected menu item
var search_str = 'current';
var menu_ul = document.getElementById("mainMenu");
if(menu_ul)
{
var a = menu_ul.getElementsByTagName("a");
if(a)
{
for(var i=0,limit=a.length; i < limit; ++i)
{
if(a[i].className.search(search_str) != -1)
{
a[i].className = a[i].className.replace(search_str,'');
}
}
}
}
a_obj.className += a_obj.className?' current':'current';
}

and here is the main template php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="<? echo $language_direction ?>" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title><? echo $browser_title ?></title>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=windows-1255">
<META NAME="Description" CONTENT="<? echo PAGE_DESCRIPTION ?>">
<META NAME="KEYWORDS" CONTENT="<? echo PAGE_KEYWORDS ?>">
<link href="<? echo convpath($ROOT."css/".$application_language); ?>.css" rel="stylesheet" type="text/css">
<link href="<? echo convpath($ROOT."css/".'menu'); ?>.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="<? echo $ROOT ?>main.js"></script>
<script language="JavaScript" src="<? echo $ROOT ?>menu.js"></script>

</head>

<body>
<div class="Content">

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
</td>

</tr>
<tr>
<td>
</a>
</td>

<td>
</a>
</td>

</td>

<td>
</td>
</tr>

<tr>
<td colspan="4" align="center" height="30px">
</td>
</tr>

<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="<? echo $ROOT ?>">
</a>
</td>
</tr>

<tr>
<td valign="top" class="Menu">
<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td align="right" width="150">

<div class="menu">
<?
include_once($APLICATION_ROOT . '/build_menu.php');
echo build_menu ( $menu );

?>

</div>

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

</table>
</td>

<td colspan="3" style="border-right: 0px solid #9397C1;" valign="top">
<div id="article_content">
<?php
include_once($APLICATION_ROOT . '/load_article.php');
echo (load_article());

?>
</div>
</td>
</tr>

<tr>
<td colspan="4">

</td>
</tr>
</table>
</div>

</body>
</html>

and finally here is the outputed html from the php file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>xbxcb</title>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=windows-1255">
<META NAME="Description" CONTENT="fgdfhdhfdh">
<META NAME="KEYWORDS" CONTENT="dfgddfdfg">
<link href="../../css/main.css" rel="stylesheet" type="text/css">
<link href="../../css/menu.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="../../main.js"></script>
<script language="JavaScript" src="../../menu.js"></script>

</head>

<body>
<div class="Content">

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
</td>

</tr>
<tr>
<td>
<a href="../../index.php">
</a>
</td>

<td>
<a href="../../index.php">
</a>
</td>

</td>

<td>
</td>
</tr>

<tr>
<td colspan="4" align="center" height="30px">
</td>
</tr>

<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="../../">
</a>
</td>
</tr>

<tr>
<td valign="top" class="Menu">
<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td align="right" width="150">

<div class="menu">

<ul id="mainMenu">
<li><a class="p_item" onclick="update_menu('m1',this);return false;" href="../../pages/index.php">link2</a></li>
<li><a class="p_item_with_subs" onclick="update_menu('m2',this);return false;" href="../../pages/link2.php">link2</a>
<ul id="m2" class="hide">
<li><a onclick="update_menu('m3',this);return false;" href="../../pages/link2.php">link3</a></li>
<li><a onclick="update_menu('m4',this);return false;" href="../../pages/link2.php">link4</a></li>
<li><a onclick="update_menu('m5',this);return false;" href="../../pages/link2.php">link5</a></li>
<li><a onclick="update_menu('m6',this);return false;" href="../../pages/link2.php">link6</a></li>
<li><a onclick="update_menu('m7',this);return false;" href="../../pages/link2.php">link7</a></li>
</ul>
</li>
<li><a class="p_item_with_subs" onclick="update_menu('m8',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m8" class="hide">
<li><a onclick="update_menu('m9',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m10',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m11',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m12',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m13',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m14',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m15',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="p_item_with_subs" onclick="update_menu('m16',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m16" class="hide">
<li><a onclick="update_menu('m17',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m18',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m19',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m20',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="p_item_with_subs" onclick="update_menu('m21',this);return false;" href="fdfg">sbgsgs</a>
<ul id="m21" class="hide">
<li><a class="sub_items_exist" onclick="update_menu('m22',this);return false;" href="fgdfgd">dfnhdfhdh</a>
<ul id="m22" class="hide">
<li><a onclick="update_menu('m23',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m24',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m25',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m26',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m27',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m28',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m29',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m30',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m31',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m32',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m33',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m34',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m35',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m36',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m37',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="sub_items_exist" onclick="update_menu('m38',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m38" class="hide">
<li><a onclick="update_menu('m39',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m40',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m41',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m42',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="sub_items_exist" onclick="update_menu('m43',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m43" class="hide">
<li><a onclick="update_menu('m44',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m45',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="sub_items_exist" onclick="update_menu('m46',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m46" class="hide">
<li><a onclick="update_menu('m47',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m48',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m49',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="p_item_with_subs" onclick="update_menu('m50',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m50" class="hide">
<li><a onclick="update_menu('m51',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m52',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m53',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m54',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="p_item_with_subs" onclick="update_menu('m55',this);return false;" href="../../pages/link2.php">link2</a></li>
<ul id="m55" class="hide">
<li><a onclick="update_menu('m56',this);return false;" href="../../pages/link2.php">link2</a></li>
<li><a onclick="update_menu('m57',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>
</li>
<li><a class="p_item" onclick="update_menu('m58',this);return false;" href="../../pages/link2.php">link2</a></li>
</ul>

</div>

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

</table>
</td>

<td colspan="3" style="border-right: 0px solid #9397C1;" valign="top">
<div id="article_content">

<div class="Article" style="background-color: rgb(255, 255, 255);">
<table class="HomeTable" style="background-color: rgb(171, 189, 211);"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><img src="../../images/home_top.jpg"
alt="dfbdb"
title="fbdfb" border="0"></td>
</tr>
<tr>
<td width="340">
<h2><a href="../../dfb/fbdfb.php"><img
src="../../images/cvbcb.jpg" alt="sdgsdgdsg"
title="fbcbvcb" border="0"></a></h2>
</td>
<td rowspan="2" style="padding: 3px;" colspan="1" nowrap="nowrap"
width="254"><span style="font-weight: bold;"> cdbdg
dbdb:</span><br>
<a href="hgmhg.php"
style="color: rgb(153, 0, 0); font-weight: bold;">fbbd</a> - xgxbg
dfbdbf.<br>
<a href="ghmhgm.php"
style="color: rgb(153, 0, 0); font-weight: bold;">fbbfd</a>fbdfb<br>
<a href="books/i-have-a-song.php">fdssg</a> –
dfbdf<br>
<a href="books/ghm.php">dfb</a>
dfbdfbdfb.<br>
<a href="books/hgm.php">fbdfb</a>
– dfbdfb.<br>
<a href="books/fdb.php">ddgsgd</a> – fdbfb
dfb<br>
<a href="books/fdb.php">fdbdfb</a>
– fgngfng.<br>
</td>
</tr>
<tr>
<td style="padding: 3px;">fgnfn
fgn
fgn<a href="books/all-books-images.php">dfbd
הbfdbfdb</a> gdgg <a href="books/all-books.php">sdgdsg
dfbdb</a>. <br>
sdfsdgds-<a href="dfbdf/new-books.php">dfbdf</a>
dfbfdbdbfb.</td>
</tr>
</tbody>
</table>
<table class="HomeTable" style="background-color: rgb(171, 189, 211);"
border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td rowspan="2" bgcolor="#f5f6cf" valign="middle">
<table class="HomeTable" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td><img src="../../fdbdfb.jpg"
alt="dfbdfbd" title="dfbdfbdbdb"></td>
<td style="padding: 3px;">dfbdfbdfb
dfbfdfdb<br>
נdfbdbf
dfbd <a href="lectures/lectures.php">fdbdfbd</a>. <br>
dfbfbף <a
href="lectures/children-activities.php">הפעלות
sgdsg</a>.</td>
</tr>
<tr>
<td colspan="2">
<h2><a href="lectures/lectures.php"><img
src="../../images/home_story_ttl.jpg"
alt="sdfdsff"
title="sdfdsfsf" border="0"></a></h2>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 3px;" bgcolor="#f1f1f1">
<div style="text-align: right;"> </div>
<div style="text-align: center;"><big><span
style="font-weight: bold; color: rgb(153, 0, 0);">sdfsdfsfsf
dfhnh</span><span style="font-weight: bold; color: rgb(153, 0, 0);"></span></big><br>
<big><span style="font-weight: bold; color: rgb(153, 0, 0);"></span></big></div>
<big><span style="font-weight: bold; color: rgb(153, 0, 0);"> </span></big>
<div style="text-align: center;"><span style="font-weight: bold;">cgsg
sdfsdfsfsf</span><br>
</div>
<big><small>"sdfssfsf
sdfsdf</small>" <small>sdfsdfs</small>  
</big><a href="dsfsdfsf.php">dfbddfhb</a><big><br>
</big> <big><span
style="font-weight: bold; color: rgb(153, 0, 0);"></span></big><br>
<a href="shop/dsfsdfsf.php"> </a> </td>
</tr>
<tr>
<td bgcolor="#dbdcb9" valign="bottom">
<table class="HomeTable" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td style="padding: 3px;">sdfsdfd <a
href="about-mirik/mirik-resume.php">dsfsdfs
sdfsdf</a> ו-<a
href="about-mirik/leah-on-mirik.php">sdfsdfs</a>. 
sdfsf
sdfsdfsd <a href="critics/index.php">sdfsdfsd</a>
ו-<a href="fhdfh.php">dsfsdfsf</a>.
dfddg <a href="fgfdgdgg.php">sdfsdf
dgfdgdgתמונות</a> sdfsfsdffsdf –<a
href="english.php"> dfgdg</a>. <br>
</td>
</tr>
<tr>
<td>
<h2><a href="dfgdfg.php"><img
src="../../dfgdfgg.gif" alt="dfgfdg"
title="dfgdfgdg" border="0"></a></h2>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 3px;">
<h2><a href="articles/index.php"><img
src="../../images/article_ttl.gif" alt="dfgfdg"
title="dfgdfg" border="0"></a></h2>
fdgdfgfdg:<br>
<a href="articles/fdgdgfd.php">dg</a>
– dgfdg<br>
<a href="articles/fg.php">fdg</a>fdgfdg<br>
<a href="articles/orianot.php">fgdfg</a> – על
dfgdg.<br>
<a href="articles/baby-massage.php">fdgfdgf</a>
– fgdfg<br>
</td>
</tr>
<tr>
<td colspan="2" style="background-repeat: no-repeat;"
background="dfgfdgfgf.gif" bgcolor="#f1f1f1"><br>
<br>
<h2><a href="dfgfdgg.php"><img
src="dfgdfgfdg.gif" alt="fdgfgfdg"
title="fdgfdgg" style="width: 130px; height: 26px;" border="0"></a></h2>
fdgfdgdgdgd <br>
dfg<a href="dfgdfgfdgfdg.php">sdgss
fgdfg</a> dfgdgdfg
fdgd. <br>
sdfsfsf <a
href="sdfsdfdsf.php">חומרים
sdfdsfdf</a> dsfdsfsdf<a
href="sdfdsgdds.php">תמלילים
sdfdsf</a> sdfsdf
sdfsdfsf<br>
  <br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</div>
</td>
</tr>

<tr>
<td colspan="4">
</td>
</tr>
</table>
</div>

</body>
</html>

important notes:

1. I have altered all the text including the menu links hrefs..before posting.
2. the code posted here is at the state where the menu is fully operational, except for the fact the the onlick defualt events are disabled , so the basic functionallity of loading links when pressed is not working.
the question is: how do I add the ability to use the menu hrefs (which is the whole point of making a menu :) ), without disrupting the java styling functions?

PeejAvery

May 12th, 2008, 08:06 AM

Whenever you change pages, you will revert to the original CSS styles. I would suggest using one of three options.

1. Use AJAX so that the page does not change.
2. Use JavaScript to set a cookie which controls the class of those links.
3. Use a PHP session variable which determines the class. This is similar to #2, but would require you interacting with the server-side.

sharper

May 14th, 2008, 07:17 PM

Thank you for your reply!

Since ajax is not an option for me right now...I will try to implement it with javascript cookies.