Keep table row expanded between form posts

Dronealone · Oct 7, 2004

Hi,
I am using the following function working with the id's of <tbody> tags to expand and contract table rows:

function toggle_element(id) {

the_element = document.getElementById(id);
image_name = 'toggle_' + id;

the_image = document.getElementById(image_name);

if (the_element.style.display == 'none' || the_element.style.display == '')
{
the_element.style.display = 'block';
the_image.src='/images/minus.gif';
}
else
{
the_element.style.display = 'none';
the_image.src='/images/plus.gif';
}
}

The rows are a form which when posted loses the current expanded / contracted state of the table.

Does anybody know a good way of keeping the 'viewstate' of the table?

Many thanks.

cLFlaVA · Oct 7, 2004

Store the viewstate in the URL or in Cookies.
Then, when you reload the page, have the body's onload event call a function that parses the URL (or cookie) to determine which TR is expanded, and set the display style of the TR.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Dronealone · Oct 7, 2004

Thanks for that.

I guess I would need to add / remove the row values from the cookie, then iterate the cookie and set the values of the row's viewstates.

I'm not very good at javascript, could you possibly give me an example of how to do this?

Thanks for your help.

cLFlaVA · Oct 7, 2004

Dronealone;

I'm not a big cookie fan. However, I worked up a working sample for you using the URL parameters. I hope you find this helpful...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function doExpansions() {
    var the_e = '';
    var params = location.href.split("?");
	if (params.length > 1) {
    	var pairs = params[1].split("&");
	    for (var i = 0; i < pairs.length; i++) {
            var kv = pairs[i].split("=");
		    if (kv[0] == 'expanded')
		        the_e = kv[1];
	    }
	    var rows = unescape(the_e).split(',');
		for (i = 0; i < rows.length; i++) {
            document.getElementById('row' + rows[i]).style.display = '';
		}
	} else return false;
}

function showHide(the_id) {
    var elem = document.getElementById('row' + the_id);
    elem.style.display = (elem.style.display == 'none') ? '' : 'none';
}

function buildField() {
    var val = '';
    for (var i = 1; i < 6; i++) {
        if (document.getElementById('row' + i).style.display == '') {
		    if (i > 1 && val != '') val += ',';
		    val += i;
		}
	}
	document.forms['the_form'].elements['expanded'].value = val;
}
-->
</script>
</HEAD>

<BODY onload="doExpansions();">
<form name="the_form" method="get" action="Noname1.html" onsubmit="buildField();">
<input type="button" onclick="showHide('1');" value="E/C 1">
<input type="button" onclick="showHide('2');" value="E/C 2">
<input type="button" onclick="showHide('3');" value="E/C 3">
<input type="button" onclick="showHide('4');" value="E/C 4">
<input type="button" onclick="showHide('5');" value="E/C 5">
<table border=1 width=400>

<tr id="row1" style="display: none";><td>Hello1</td><td>Goodbye1</td></tr>
<tr id="row2" style="display: none";><td>Hello2</td><td>Goodbye2</td></tr>
<tr id="row3" style="display: none";><td>Hello3</td><td>Goodbye3</td></tr>
<tr id="row4" style="display: none";><td>Hello4</td><td>Goodbye4</td></tr>
<tr id="row5" style="display: none";><td>Hello5</td><td>Goodbye5</td></tr>

</table>
<input type="hidden" name="expanded" value="">
<input type="submit">
</form>
</BODY>
</HTML>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Keep table row expanded between form posts

Dronealone

IS-IT--Management

cLFlaVA

Programmer

Dronealone

IS-IT--Management

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor