Toggle/Preserve table display state through refresh with cookies.

I have a collapsable table that uses javascript and php to set an
inline display style tag to show or hide sub-tables with an onclick
event. I am working from a demo script for this that works fine and
trying to incorporate the functionality into a larger application.

So my display toggle is working fine but the cookie is not working.
Anhytime I refresh the window all the collapsed tables revert to their
default state. I can't figure out why it's not working; the code in
the source looks good. But it seems the cookie is not being set
porperly. I can't figur eout why not. I will post the scripts if
anybody has any ideas how to make this work please let me know.


foreach($LINES as $Trader => $Trader_ARR)
{
print "\r\r<!-- BEGIN TRADER -->";
Print "\r<table style=\"text-align: left; width: 100%;\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\">
<tbody>\r<tr onclick=\"return !toggleCollapseState('Trader".
$Trader."');\" ";
if ($T % 2)
print "style=\"background-color: rgb(204, 153, 51);\">";
else
print "style=\"background-color: rgb(255, 255, 102);\">";

print "<td colspan=\"5\">" . $Trader . "
<td width=\"10%\">" . $Trader_ARR["Total_Buys"] . "</td>
<td width=\"10%\">" . $Trader_ARR["Total_Sells"] . "</td>
<td width=\"10%\">" . $Trader_ARR["Total_Pos"] . "</td>";
if ($Trader_ARR["Total_PL"] < 0)
print "<td width=\"10%\" align=\"right\" style=\"background-color:
rgb(255, 0, 0);\">" . $Trader_ARR["Total_PL"] . "</td></tr>";
else
print "<td width=\"10%\" align=\"right\" style=\"background-color:
rgb(0, 255, 0);\">" . $Trader_ARR["Total_PL"] . "</td></tr>";

$E = 0;

print "\r\r<!-- BEGIN EXCHANGE -->";
print "\r<tr id=\"Trader".$Trader."\" style=\"";
echo getState('Trader".$Trader."');
print "\"><td colspan=\"9\" rowspan=\"1\">";
print "\r<table style=\"text-align: left; width: 100%;\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\"><tbody>";

foreach($Trader_ARR as $Exchange => $Exchange_ARR)
{
if ($E < 4) {
next($Trader_ARR);
} else {
if ($E % 2)
print "\r<tr onclick=\"return !toggleCollapseState('" . $Trader .
$Exchange . "');\" style=\"background-color: rgb(204, 204, 204);\">";
else
print "\r<tr onclick=\"return !toggleCollapseState('" . $Trader .
$Exchange . "');\">";

print "<td width=\"15%\"></td>
\r<td colspan=\"4\">" . $Exchange . "</td>
\r<td width=\"10%\">" . $Exchange_ARR["Total_Buys"] .
"</td>
\r<td width=\"10%\">" . $Exchange_ARR["Total_Sells"] .
"</td>
\r<td width=\"10%\">" . $Exchange_ARR["Total_Pos"] . "</td>";
if ($Exchange_ARR["Total_PL"] < 0)
print "<td width=\"10%\" align=\"right\" style=\"background-color:
rgb(255, 0, 0);\">" . $Exchange_ARR["Total_PL"] . "</td></tr>";
else
print "<td width=\"10%\" align=\"right\" style=\"background-color:
rgb(0, 255, 0);\">" . $Exchange_ARR["Total_PL"] . "</td></tr>";

$P = 0;
print "\r\r<!-- BEGIN PRODUCT -->";
print "\r<tr id=\"" . $Trader . $Exchange . "\" style=\"display:
none\"><td colspan=\"9\" rowspan=\"1\">";
print "\r<table style=\"text-align: left; width: 100%;\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\"><tbody>";

foreach($Exchange_ARR as $Product => $Product_ARR)
{
if ($P < 4) {
next($Exchange_ARR);
} else {
if ($P % 2)
print "\r<tr onclick=\"return !toggleCollapseState('" . $Trader .
$Exchange . $Product . "');\" style=\"background-color: rgb(204, 204,
255);\">";
else
print "\r<tr onclick=\"return !toggleCollapseState('" . $Trader .
$Exchange . $Product . "');\" style=\"background-color: rgb(153, 153,
255);\">";

print "\r<td colspan=\"4\" width=\"20%\"></td>
\r<td>" . $Product . "</td>
\r<td width=\"10%\">" .
$Product_ARR["Total_Buys"] . "</td>
\r<td width=\"10%\">" .
$Product_ARR["Total_Sells"] . "</td>
\r<td width=\"10%\">" .
$Product_ARR["Total_Pos"] . "</td>
\r<td width=\"10%\" align=\"right\">" .
$Product_ARR["Total_PL"] . "</td></tr>";

$C = 0;
print "\r\r<!-- BEGIN CONTRACT -->";
print "\r<tr id=\"" . $Trader . $Exchange . $Product . "\" style=
\"display: none\"><td colspan=\"9\" rowspan=\"1\">";
print "\r<table style=\"text-align: left; width: 100%;\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\"><tbody>";

foreach($Product_ARR as $Contract => $Contract_ARR)
{
if ($C < 4) {
next($Product_ARR);
} else {
print "\r<tr>\r<td width=\"23%\" colspan=\"4\"></td>
<td>" . $Contract . "</td>
\r<td width=\"10%\">" .
$Contract_ARR["Total_Buys"] . "</td>
\r<td width=\"10%\">" .
$Contract_ARR["Total_Sells"] . "</td>
\r<td width=\"10%\">" .
$Contract_ARR["Total_Pos"] . "</td>
\r<td width=\"10%\" align=\"right\">" .
$Contract_ARR["Total_PL"] . "</td></tr>";
}
$C++;
}

print "\r</tbody></table></tr>";
print "\r\r<!-- END CONTRACT -->";
}
$P++;
} // END Product Foreach

print "\r</tbody></table>";
print "\r<!-- END PRODUCT -->";
}
$E++;
} //END Exchange Foreach
print "\r</tbody></table>";
print "\r<!-- END EXCHANGE -->";
print "</tr></table>";
print "\r<!-- END TRADER -->";
$T++;
}




Thats a code snipet from the app. I have a multi-dimension array that
holds data based on a series of SQL SELECT statements. A simple
foreach loops thorugh the array and writes the data into my table.
Here are the scripts:

GLOBAL.js

/**
* Get an element via it's ID
*
* @param string The ID of the element you want to fetch
*
* @return Returns false on error, and the element object with success
*/
function getObj(id)
{
var obj = null;

if(document.getElementById)
obj = document.getElementById(id);
else if(document.all)
obj = document.all[id];
else if(document.layers)
obj = document.layers[id];

return obj;
}





/**
* Add a new cookie
*
* @param string The name of the cookie
* @param string The value of the cookie
* @param mixed A pre-set date object or an integer representing
the number of days. Default value creates a 'session' cookie.
* @param string The domain access of the cookie. Defaults to the
current domain.
* @param string The path access of the cookie. Defaults to the
entire site, "/".
*/
function setCookie(name, value, expires, domain, path)
{
//------------------------------
// Build expiry
//------------------------------
// Date object
if(expires.toGMTString)
expires = '; expires=' + expires.toGMTString();

// Integer, assume its number of days
else if(typeof(expires) == 'integer')
{
var date = new Date();
date.setTime( date.getTime() + (expires * 86400) );
expires = '; expires=' + date.toGMTString();
}

// Session cookie
else
expires = '';


//------------------------------
// Build domain
//------------------------------
if(domain)
domain = '; domain=' + domain;
else
domain = '';


//------------------------------
// Build path
//------------------------------
if(path)
path = '; path=' + path;
else
path = '; path=/';


//------------------------------
// Make cookie
//------------------------------
document.cookie = name + '=' + escape(value) + expires + domain +
path;
}





/**
* Read the value of a cookie.
*
* @param string The name of the cookie you want to gain the value of
*
* @return mixed The value of the cookie if it was found, and null if
it was not
*/
function readCookie(name)
{
var doc_cookies = document.cookie.split(';');
search = name + '=';

for(var i = 0; i < doc_cookies.length; i++)
{
cookie = doc_cookies[i];

if(cookie.indexOf(search) != -1)
return unescape(cookie.substring(search.length));
}

return null;
}

COLLAPSE.JS

/**
* Toggle the state of an object
*
* @param string id The ID of the object to toggle
*/
function toggleCollapseState(id)
{
var obj = getObj(id);

if(!obj)
return false;

if(obj.style.display == 'none')
{
var state = 1;
obj.style.display = '';
}

else
{
var state = 0;
obj.style.display = 'none';
}

saveCollapseState(id, state);

return true;
}





/**
* Modify the document cookie to remember the state of an object
*
* @param string id The ID of the object
* @param integer state The state of the object
*/
function saveCollapseState(id, state)
{
var cookie = readCookie('collapseState');

if(!cookie)
cookie = '';

var search = new RegExp('(' + id + ')=([01]{1}),');

if(search.test(cookie))
cookie = cookie.replace(search, '$1$2=' + state + ',');
else
cookie += id + '=' + state + ',';

setCookie('collapseState', cookie, new Date('January 1, 2020'));
}

COLLAPSE.PHP

<?php

/**
* Get an array of the collapse states from the cookie
*/
function getCollapseStates()
{
$collapseState = array();

if(isset($_COOKIE['collapseState']))
{
$items = explode(',', $_COOKIE['collapseState']);
unset($items[ count($items) - 1 ]);

foreach($items AS $item)
{
list($id, $state) = explode('=', $item);

$collapseState[$id] = $state;
}
}

return $collapseState;
}





/**
* Print the style according to the objects collapse state.
*
* @param string id The id of the object
* @param integer default_state If the object state was not found in
the cookie,
* then what default state should it
assume?
*/
function getState($id, $default_state = 0)
{
static $collapseState;

if(!isset($collapseState))
$collapseState = getCollapseStates();

if(array_key_exists($id, $collapseState))
$state = $collapseState[$id];
else
$state = $default_state;

if($state)
return '';
else
return 'display:none;';

}

?>

I look at the data in the cookie and it appears as if its not being
wrttien properly. Any dieas on how to fix this?

Cookie data:

TraderJTS1%3D1%2C%25TraderRWD1%3D1%2C%25TraderDPK1 %3D1%2CDPKCME
%3D1%2CDPKICE_IPE
%3D1%2Cobj1%3D1%2CTraderEVT1%3D0%2CTraderJTS1%3D1% 2CTraderJTS1%3D1%2CTraderMHR1%3D1%2CTraderJCR1%3D1 %2CTraderJTS1%3D1%2CJTSCME1%3D1%2CTraderJTS1%3D1%2 CTraderNMY
%3D1%2CTraderGSR%3D1%2CTraderJMY%3D1%2CTraderJJE%3 D1%2CTraderDPK
%3D1%2CTraderMBS%3D1%2CTraderJCR1%3D1%2CTraderMHR
%3D1%2CTraderJTS1%3D1%2CJTSCMECL%3D1%2CJTSCMEHO
%3D1%2CTraderJTS1%3D1%2CJTSCME%3D1%2CJTSCMERB%3D1% 2CJTSICE_IPE
%3D1%2CJTSICE_IPEICE%20WTI%3D1%2CTraderJTS%3D1%2C



Finally here is an example of what the PHP source writes. It looks
good to me but I can't get the cookie to work. This is making me go
crazy! Please help!

<!-- BEGIN TRADER -->
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr onclick="return !toggleCollapseState('TraderJTS');"
style="background-color: rgb(255, 255, 102);"><td colspan="5">JTS
<td width="10%">619</td>
<td width="10%">619</td>
<td width="10%">0</td><td width="10%" align="right"
style="background-color: rgb(255, 0, 0);">-2405818</td></tr>

<!-- BEGIN EXCHANGE -->
<tr id="TraderJTS" style="display:none;"><td colspan="9" rowspan="1">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2"><tbody>
<tr onclick="return !toggleCollapseState('JTSCME');"><td width="15%"></
td>

<td colspan="4">CME</td>

<td width="10%">126</td>

<td width="10%">152</td>

<td width="10%">-26</td><td width="10%" align="right"
style="background-color: rgb(0, 255, 0);">50572</td></tr>

<!-- BEGIN PRODUCT -->
<tr id="JTSCME" style="display: none"><td colspan="9" rowspan="1">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2"><tbody>
<tr onclick="return !toggleCollapseState('JTSCMECL');"
style="background-color: rgb(153, 153, 255);">
<td colspan="4" width="20%"></td>

<td>CL</td>

<td width="10%">106</td>

<td width="10%">132</td>

<td width="10%">-26</td>

<td width="10%" align="right">50430</td></tr>

<!-- BEGIN CONTRACT -->
<tr id="JTSCMECL" style="display: none"><td colspan="9" rowspan="1">
<table style="text-align: left; width: 100%;" border="0"
cellpadding="2" cellspacing="2"><tbody>
<tr>
<td width="23%" colspan="4"></td>
<td>Feb08</td>

<td width="10%">74</td>

<td width="10%">100</td>

<td width="10%">-26</td>

<td width="10%" align="right">31200</td></tr>
<tr>
<td width="23%" colspan="4"></td>
<td>Jan08</td>

<td width="10%">31</td>

<td width="10%">31</td>

<td width="10%">0</td>

<td width="10%" align="right">19230</td></tr>
<tr>
<td width="23%" colspan="4"></td>
<td>Mar08</td>

<td width="10%">1</td>

<td width="10%">1</td>

<td width="10%">0</td>

<td width="10%" align="right">0</td></tr>
</tbody></table></tr>

<!-- END CONTRACT -->

ErikVoit@gmail.com wrote:
> I have a collapsable table that uses javascript and php to set an
> inline display style tag to show or hide sub-tables with an onclick
> event. I am working from a demo script for this that works fine and
> trying to incorporate the functionality into a larger application.
>
> So my display toggle is working fine but the cookie is not working.
> Anhytime I refresh the window all the collapsed tables revert to their
> default state. I can't figure out why it's not working; the code in
> the source looks good. But it seems the cookie is not being set
> porperly. I can't figur eout why not. I will post the scripts if
> anybody has any ideas how to make this work please let me know.
>
>
<code snipped>

Suggestion. Get this down to a small test case, without the javascript.
No one is going to go through hundreds of lines of code, especially
when 99% of the PHP code is just print statements.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================

OK. Here is the first case in my PHP code where you can see how one
table will collapse with an onclick event from the parent table row.
The scripts are posted above. Both the Javascript and the PHP that
should set alter and read the cookie. The scripts work fine with a
demo package. I'm guessing it doesn't work here because of how the
PH priont statements and the javascript is interacting. The collapse
function works ok but when the window is refreshed the cookie is not
read properly and all the windows revert to their default state.

If I change the default state in the read cookie function to all open
instead of all closed I see the change. So again that function is
working. I think my cookie is niot being set properly. Any ideas on
how to fix this owuld be greatly appreciated.

Here is my cookie data:
TraderJTS1%3D1%2C%25TraderRWD1%3D1%2C%25TraderDPK1 %3D1%2CDPKCME
%3D1%2CDPKICE_IPE%3D1%2Cobj1%3D1%2CTraderEVT
%3D1%2CTraderJTS1%3D1%2CTraderJTS1%3D1%2CTraderMHR 1%3D1%2CTraderJCR1%3D1%2CTraderJTS1%3D1%2CJTSCME1% 3D1%2CTraderJTS1%3D1%2CTraderNMY
%3D1%2CTraderGSR%3D1%2CTraderJMY%3D1%2CTraderJJE%3 D1%2CTraderDPK
%3D1%2CTraderMBS%3D1%2CTraderJCR%3D1%2CTraderMHR
%3D1%2CTraderJTS1%3D1%2CJTSCMECL%3D1%2CJTSCMEHO%3D 1%2CTraderJTS
%3D1%2CJTSCME%3D1%2CJTSCMERB%3D1%2CJTSICE_IPE%3D1% 2CJTSICE_IPEICE%20WTI
%3D1%2C

It looks like the % are popping up in the wrong place...


foreach($LINES as $Trader => $Trader_ARR)
{
print "\r\r<!-- BEGIN TRADER -->";
Print "\r<table style=\"text-align: left; width:
100%;\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\">
<tbody>\r<tr onclick=\"return !
toggleCollapseState('Trader".
$Trader."');\" ";
if ($T % 2)
print "style=\"background-color: rgb(204, 153,
51);\">";
else
print "style=\"background-color: rgb(255, 255,
102);\">";

print "<td colspan=\"5\">" . $Trader . "
<td width=\"10%\">" .
$Trader_ARR["Total_Buys"] . "</td>
<td width=\"10%\">" .
$Trader_ARR["Total_Sells"] . "</td>
<td width=\"10%\">" .
$Trader_ARR["Total_Pos"] . "</td>";
if ($Trader_ARR["Total_PL"] < 0)
print "<td width=\"10%\" align=\"right\" style=
\"background-color:
rgb(255, 0, 0);\">" . $Trader_ARR["Total_PL"] . "</td></tr>";
else
print "<td width=\"10%\" align=\"right\" style=
\"background-color:
rgb(0, 255, 0);\">" . $Trader_ARR["Total_PL"] . "</td></tr>";

$E = 0;

print "\r\r<!-- BEGIN EXCHANGE -->";
print "\r<tr id=\"Trader".$Trader."\" style=\"";
echo getState('Trader".$Trader."');
print "\"><td colspan=\"9\" rowspan=\"1\">";
print "\r<table style=\"text-align: left; width: 100%;
\" border=
\"0\" cellpadding=\"2\" cellspacing=\"2\"><tbody>";

I figured it out!!!!!!!! Wow that took way too long. I hate to be
stuck like that but sometimes putting the problem on ice for a day is
the best approach to finding a solution. I should have done that
yesterday instead of pulling my hair out ><

This:

$E = 0;
>
> print "\r\r<!-- BEGIN EXCHANGE -->";
> print "\r<tr id=\"Trader".$Trader."\" style=\"";
> echo getState('Trader".$Trader."');
> print "\"><td colspan=\"9\" rowspan=\"1\">";
> print "\r<table style=\"text-align: left; width: 100%;\" border=
> \"0\" cellpadding=\"2\" cellspacing=\"2\"><tbody>";


Needed to be:

$E = 0;
$TraderID = "Trader".$Trader;
echo "\r\r<!-- BEGIN EXCHANGE -->";
echo "\r<tr id=\"Trader".$Trader."\" style=\"";
echo getState($TraderID);
echo "\"><td colspan=\"9\" rowspan=\"1\">";
echo "\r<table style=\"text-align: left; width: 100%;\" border=\"0\"
cellpadding=\"2\" cellspacing=\"2\"><tbody>";