DIV Tabs not remembering state apon refresh

[MayoorPatel]

I have a tabbed menu, to demostrate this correctly I have created a test account on our website

http://demo.myskillsrecord.co.uk/sectorskills/login.asp

ID : 8863
username : test
password : test

Click on sector skills reports

and you can see a tabbed menu. The problem is when I go to the third option which is cards Issued, and use the verifier dropdown to filter by verifier, the tab flicks back to the first tab everytime. I need a way of remebering which tab the filter was applied to and staying with that tab after the refresh.

here are the javascript functions I am using to make the tab changes.

function moveTabSectorSkillsReports(theTab, thePane) {
      // Hide All panes
      document.getElementById('cardActivityScheme').style.display = "none";
      document.getElementById('allNewCards').style.display = "none";
      document.getElementById('cardsIssued').style.display = "none";
      document.getElementById('verifierActivity').style.display = "none";
    document.getElementById('verifierActivityDetailed').style.display = "none";
      
      
      // Set PreviousTab back to normal
      document.getElementById(previousTab).className = "tab";
      
      // Set previousTab to this tab being clicked
      previousTab = theTab;
            
      // Set this tab being clicked to selected
      document.getElementById(theTab).className = "selectedTab";
            
      // Show the pane
      document.getElementById(thePane).style.display = "";
      
             
      if ((theTab == 'cardActivitySchemeTab')||(theTab == 'allNewCardsByTab'))
      {        
          document.getElementById('VerifierCell').style.display = 'none';           
          document.getElementById('OrganisationCell').style.display = 'none';
      }
      
      if (theTab == 'cardsIssuedTab')
      {        
          document.getElementById('VerifierCell').style.display = 'inline';
          document.getElementById('OrganisationCell').style.display = 'none';          
             
      }      
      
      if ((theTab == 'verifierActivityTab'))
      {        
          document.getElementById('VerifierCell').style.display = 'inline';
          document.getElementById('OrganisationCell').style.display = 'none';               
      }      
      
      if (theTab == 'verifierActivityDetailedTab')
      {        
          document.getElementById('OrganisationCell').style.display = 'inline';        
          document.getElementById('VerifierCell').style.display = 'none';              
      }             
       
}

What I need is another fucntion on load that checks what the previous tab was and remebers it for the refresh. Can anyone help?

 

[BabyJeffy]

When the user clicks a tab, store the value of the tab in a known cookie (using javascript). Every time you load the page, check if the cookie exists, and read it's value (if it does)... then use this information to set the correct tab (using javascript - or server-side as you generate the page if it's resent from the server).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[MayoorPatel]

Sounds like an Idea. I'll try it thanks!

Mayoor