• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 211
  • Last Modified:

How to detect the page is not just being refreshed ?

I have a table of links that is being used for a menu. The menu expands if you click on a menuitem (link) that has subitems and collapses if you click on it again. Pretty standard menu action but here is the problem. The menuitem selected is passed in the URL and if you hit refresh then it appears as if you  have clicked on the menu item. Thus it will toggle between expand/collapse.

What would be the best way to detect that someone has really clicked on the menu item link and not just hit refresh ?

If I pass something in the URL - it will be there as well on a refresh

If I use a form then the user gets the annoying "DO YOU WANT TO REPOST" alerts.

2 Solutions
Use javascript to do the expand/collapse action for the menu.  I use the following code all the time for my menu's:

function ToggleView(item) {
      var myItem = document.getElementById(item);
      if(myItem.style.display == "none") {
            myItem.style.display = "block";
      } else {
            myItem.style.display = "none"

That way you can have a link that when they click it, it opens/closes the menu.

<a onclick="ToggleView('menuID');">Menu Item</a>

<div id="menuID" style="display:none;">Menu stuff here</a>

When you click on 'Menu Item', it will display open/close the div that has 'Menu stuff here'.  You can also do this with tables/spans/etc.
Also, this does not refresh the page, it merely modifies the items currently on it.  If they refresh the page, it will reset all the menu's to their default view (in my example this would be the hidden state).
Bl248Author Commented:
Thanks - this looks interesting and I just remembered a client reqirement for this component and why I went down this road. The client wanted a Menu that would work without JS and was server based. I've been chasing a logic error for a day and completely forgot to mention this.

This is why I ended up passing the menuitem details in the URL.

Hum ... so if the current selected item = clicked item then collapse but not if this is a refresh.
But without JS - not sure if this is doable.

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.


"This uses just CSS 2 to turn nested lists into a working menu and does NOT use any JavaScript."
This one is basically the same, but seems a bit more elegant.
Be wary though, the above methods are extremely buggy in Internet Explorer.
Michel PlungjanIT ExpertCommented:
1. use a cookie to keep state of the click
2. if cookies are turn off, let the user LIVE with the toggle
3. use GET in the form to stop the "repost form"question

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now