Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    remember status of expandable table

    Currently I have the following code to produce an expandable table. I need to extend the functionality to rebuild the table to it's previous state on a page refresh.

    It would also be a major bonus to be able to remember the state of child rows - so if a top level row is expanded and then one of it's child rows is expanded, if I then continue to collapse the top level row, then re-expand it, it would show the previously opened child row and it's expanded child rows.

    I have tried a few approaches but have not got very far, and so I would very much appreciate any suggestions on how to achieve this functionality.

    I think the best approach is going to be storing a status string (cookieName='rowID:status::rowID2:status'), but I can't get my head around extending my existing functions to record the status, and also the method to rebuild the table to it's previous state on a page refresh.

    The current page (which in reality is produced dynamically) is included below -

    Code:
    <html>
    <head>
    <style media="screen" type="text/css">
    
    .tableRowHidden {
    	display:none;
    }
    
    .tableRow1 {
    	display:block;
    }
    
    .expand, .collapse {
    	background-position:center;
    	background-repeat:no-repeat;
    	cursor:pointer;
    	width:13px;
    	height:13px;
    	padding:0px;
    }
    
    .expand {
    	background-image:url(expand.gif);
    }
    
    .collapse {
    	background-image:url(collapse.gif);
    }
    
    .noExpand {
    	width:13px;
    	height:13px;
    	padding:0px;
    }
    
    .right {
    	text-align:right;
    }
    
    #searchResults {
    	background-color:#CCCCCC;
    	border-collapse:collapse;
    	border-color:#FFFFFF;
    	border-style:solid;
    }
    
    .totalRow {
    	font-weight:bold;
    }
    
    </style>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    function toggleBgImg(cellId)
    	{
    	var cell = document.getElementById(cellId);
    	if(cell.className=="expand")
    		{
    		cell.className="collapse";
    		}
    	else
    		{
    		cell.className="expand";
    		}
    	}
    
    function showHide(show, hide)
    	{
    	var showIDs = show.split(',');
    	
    	if(document.getElementById(showIDs[0]).className=="tableRowHidden")
    		{
    		tableRowShow(show);
    		}
    	else
    		{
    		tableRowHide(hide);
    		}
    	}
    
    function tableRowShow(show)
    	{
    	var showIDs = show.split(',');
    
    	for (var i=0; i<showIDs.length; i++)
    		{
    		document.getElementById(showIDs[i]).className="tableRow1";
    		}
    	}
    
    function tableRowHide(hide)
    	{
    	var hideIDs = hide.split(',');
    
    	for (var i=0; i<hideIDs.length; i++)
    		{
    		document.getElementById(hideIDs[i]).className="tableRowHidden";
    
    		var cell = document.getElementById('exp_' + hideIDs[i]);
    		if (cell)
    			{
    			cell.className = "expand";
    			}
    		}
    	}
    -->
    </script>
    </head>
    
    <body>
    
    <table id="searchResults">
    	<tr class="tableHeader">
    		<th class="noExpand"></th>
    		<th class="noExpand"></th>
    		<th>Type</th>
    		<th>No.</th>
    		<th width="250">Name</th>
    		<th>Cost</th>
    	</tr>
    	<tr id="1" class="tableRow1">
    		<td id="exp_1" onclick="showHide('2,4', '2,3,4,5,6,7'); toggleBgImg('exp_1');" class="expand"></td>
    		<td class="noExpand"></td>
    		<td>ST</td>
    		<td>1</td>
    		<td>1</td>
    		<td class="right">&pound;10.00</td>
    	</tr>
    	<tr id="2" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td id="exp_2" onclick="showHide('3', '3'); toggleBgImg('exp_2');" class="expand"></td>
    		<td>AR</td>
    		<td>1</td>
    		<td class="areaName">1_1</td>
    		<td class="right">&pound;1.00</td>
    	</tr>
    	<tr id="3" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td>CO</td>
    		<td>1</td>
    		<td class="costName">1_1_1</td>
    		<td class="right">&pound;1.00</td>
    	</tr>
    	<tr id="4" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td id="exp_4" onclick="showHide('5,6,7', '5,6,7'); toggleBgImg('exp_4');" class="expand"></td>
    		<td>AR</td>
    		<td>2</td>
    		<td class="areaName">1_2</td>
    		<td class="right">&pound;9.00</td>
    	</tr>
    	<tr id="5" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td>CO</td>
    		<td>1</td>
    		<td class="costName">1_2_1</td>
    		<td class="right">&pound;2.00</td>
    	</tr>
    	<tr id="6" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td>CO</td>
    		<td>2</td>
    		<td class="costName">1_2_2</td>
    		<td class="right">&pound;3.00</td>
    	</tr>
    	<tr id="7" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td>CO</td>
    		<td>3</td>
    		<td class="costName">1_2_3</td>
    		<td class="right">&pound;4.00</td>
    	</tr>
    	<tr id="8" class="tableRow1">
    		<td id="exp_8" onclick="showHide('9', '9,10'); toggleBgImg('exp_8');" class="expand"></td>
    		<td class="noExpand"></td>
    		<td>ST</td>
    		<td>2</td>
    		<td>2</td>
    		<td class="right">&pound;7.00</td>
    	</tr>
    	<tr id="9" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td id="exp_9" onclick="showHide('10', '10'); toggleBgImg('exp_9');" class="expand"></td>
    		<td>AR</td>
    		<td>1</td>
    		<td class="areaName">2_1</td>
    		<td class="right">&pound;7.00</td>
    	</tr>
    	<tr id="10" class="tableRowHidden">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td>CO</td>
    		<td>1</td>
    		<td class="costName">2_1_1</td>
    		<td class="right">&pound;7.00</td>
    	</tr>
    	<tr class="totalRow">
    		<td class="noExpand"></td>
    		<td class="noExpand"></td>
    		<td></td>
    		<td></td>
    		<td class="right">Total</td>
    		<td class="right">&pound;17.00</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    TIA for any help/suggestions

    Nick

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anybody? Thougts/suggestions would be very much appreciated.

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    On a refresh everything is lost unless you save it to the cookie as it is being done, or keeo it in a hidden frame. You cannot maintain teh state across a refresh. The whole point of doing a refresh is that the user want to re-render the page from scratch.

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #5
    New Coder
    Join Date
    Apr 2003
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The whole point of doing a refresh is that the user want to re-render the page from scratch.
    NO! NO! NO! That is not the case at all. In web-based client/server application development, an http call is not necessarily about a "user wanting to re_render the page from scratch". It is about the user wishing to perform some task. The two things are very different.

    If you had read my orignal question you would have realised that I had noted that for the state to persist (client-side) I need to use a cookie. The problem I am having is with how to get from the page structure and functions I have now, to a version that will allow the expanded/collapsed state to persist.

    Currently when a user makes a change to the page content (inserting or deleting content) the page is submitted to itself and then re-displayed after performing whatever task the user requested. On re-displaying currently the page will rebuild in the default status of all top level items being collapsed.

    This is a nuisance for the user as they may well be working within a section which now appears collapsed and so they have to re-expand to return the page to its' previous state.

    This may seem petty, but users often are.

    Thank you for taking the time to have a look anyway.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •