Page Status and Back Button

[ReportingAnalyst]

Hi,

On load of the my page, I see one employee, 5 radio buttons for reports. I can drill down on the employee and see the subordinates.

I have a page where I click on a radio button to select an employee (typically a manager), select another radio button to select a report, based on the report radio button selected, dropdown boxes show up, users select the values in the dropdown boxes and click on the submit button.

I view the report, then want to come back to the previous page to see the report of another employee - say a manager's subordinate.

What happens is the page does not show the state I left it in.

Hierarchy is all collapsed. (but if I expand it again, I can see the selected subordinate)
Radio buttons for the reports shows. But the dropdown boxes for the selected radio button do not show. In order to show them again, I click on another radio button and go back to the previously selected radio button to see the drop down values.

So my question is how can I preserve the state of my page without the form elements hidden or collapsed

My javascript for the hierarchial tree is:

function s_Hide(el){
	obj = document.getElementById(el).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}

My Javascripf for the report radio buttons is:

function showHide(el)
{
	var f = el.form;
	for(var i=0; i<f.crystalradio.length; i++)
	{
		if( f.crystalradio[i].checked )
		{
			switch( f.crystalradio[i].value )
			{
				case 'CommissionStatement':
				case 'PaymentReconciliation':
					document.getElementById( 'commpay' ).style.display = 'block';
					document.getElementById( 'quarter_perf_team' ).style.display = 'none';
					document.getElementById( 'salesrank' ).style.display = 'none';
					document.getElementById( 'quarter_Perf' ).style.display = 'none';
					document.getElementById( 'sales_prod' ).style.display = 'none';
					//document.getElementByID( 'span').style.display = 'block'
				break;
				case 'QuarterlyPerformance-Team':
					document.getElementById( 'commpay' ).style.display = 'none';
					document.getElementById( 'quarter_perf_team' ).style.display = 'block';
					document.getElementById( 'salesrank' ).style.display = 'none';
					document.getElementById( 'quarter_Perf' ).style.display = 'none';
					document.getElementById( 'sales_prod' ).style.display = 'none';
					//document.getElementByID( 'span').style.display = 'block'
				break;				
			}
		}
	}
}

 

[trollacious]

Use cookies.

Lee

 

[BillyRayPreachersSon]

Mmmm... cookies!

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kaht]

Oatmeal raisin....... *barf*

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[ReportingAnalyst]

I have never used cookies before, but I plan on starting by using this:

<script language="JavaScript">
<!--

function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( expires_year )
  {
    var expires = new Date ( expires_year, expires_month, expires_day );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
	cookie_string += "; path=" + escape ( path );

  if ( domain )
	cookie_string += "; domain=" + escape ( domain );

  if ( secure )
	cookie_string += "; secure";

  document.cookie = cookie_string;

}

function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  // current date & time
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );

  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

Now what I am supposed to capture the previous state of the page? How do I refer to the form elements' state?

Thanks.

 

[cLFlaVA]

on page load, you will need to read the cookie and expand/collapse the relevant sections.

when each section is manually (by click) expanded or collapsed, you will need to store that state in a cookie.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ReportingAnalyst]

Hi,

I am stuck here.

I try to call this getCookie(Name) function from within the s_hide(el) function which expands and collapses my hierarchial tree. But I am not able to preserve the state as I left it. Do I need to refer to the UL tags in some other function?

<li>
  	<input type="radio" checked id="empid" name="empid" value="4655">
    <a href="#" class="a_style" onClick="s_Hide('4655', this)" theme="#EAEAFF">TopMgr</a>
    	<ul id="4655" style="display: none">
    		<li>
    			<input type="radio" id="empid" name="empid" value="2109922">
    			<a href="#" class="a_style" onClick="s_Hide('2109922', this); return false;">Mgr1</a>
				<ul id="2109922" style="display: none">
    				<li>
    					<input type="radio" id="empid" name="empid" value="8693">
    					Sub1
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8793">
    					Sub2
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="8893">
    					Sub3
    				</li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40105">
    			<a href="#" class="a_style" onClick="s_Hide('40105', this); return false;">Mgr2</a>
				<ul id="40105" style="display: none">
    				<li>
    					<input type="radio" id="empid" name="empid" value="40405">
    					Sub4
    				</li>
    				<li>
    					<input type="radio" id="empid" name="empid" value="40805">
    					Sub5
    				</li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40589">
    			<a href="#" class="a_style" onClick="s_Hide('40589', this); return false;">Mgr3</a>
				<ul id="40589" style="display: none">
				    <li>
				    	<input type="radio" id="empid" name="empid" value="40599">
				    	Sub6
				    </li>
    			</ul>
    		</li>
    		<li>
    			<input type="radio" id="empid" name="empid" value="40698">
    			Sub7
    		</li>
    	</ul>
  </li>
</ul>

Javascript is:

/**********************************************************
Function to expand and collapse the Hierarchial tree
**********************************************************/
function s_Hide(el){
	obj = document.getElementById(el).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
	get_cookie(Name);
}

//persistence feature add-on

var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

window.onLoad = get_cookie(Name);