show hide divs - show last state upon reload/post

[ll]

I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis

--------------------------------------------

<script language="javascript" type="text/javascript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>

 

[Erwin Moller]

ll schreef:

I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis

--------------------------------------------

<script language="javascript" type="text/javascript">
function WM_toggle(id){
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
return false;
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
}
</script>

Hi,

First, that code is not recommended (at least not by me).
Why don't you simply use getElementById()??
Also, stop using the language="javascript".

Your function could look like:

<script type="text/javascript">
function showHide(someID){
var theEldisp = document.getElementById(someID);
theEldisp.style.display=(theEldisp.style.display=='none')?'block':'none';
}
</script>

<span onClick="showHide('test');">click here to toggle On and off</span>
<hr>
<div id="test" style='display:block'>
your hiding div content.<br> your hiding div content.<br>
</div>


----------------
To your question concerning remembering the last state:
Since you have a fresh page, the old values are gone.
So you have to find some way to remember them.

Two ways to do this:
1) Clientside solution:
-> store the values in a frameset.
When you post a form in a window in a frameset, only that window is
refreshed, not the window holding the frameset definition.
So you can store here the last value of the div.
Then, if the page loads, check let your new page ask the frameset for
the last value and act accordingly ('none' or 'block')

2) Post the state to your processing script, and let the response write
the right value.
If you control the server too, you can easily add a hidden field to your
form, set its value when somebody click the toggle.
Now if the form is received by the server, do you normal things, and
check for this hidden value, and in the output simply set it right
immediately.
So your output will be (on PHP for example):

<?php
$dispStyle = ((isset($_POST['lastdisp'])) ? $_POST['lastdisp']: 'none');
?>
<div id="test" style='display:<?php echo dispStyle; ?>'>
your hiding div content.<br> your hiding div content.<br>
</div>


Hope that helps.
Personally I prefer the second solution because that doesn't involve
extra frames.

Regards,
Erwin Moller

 

[Thomas 'PointedEars' Lahn]

I'm currently working on a form which consists of a show and hide
javascript. The toggle works fine, although when I click on submit, I
would like the page to reload with the toggle (show/hide) div in the
same state it was before being submitted. E.G. If the div was
visible, I'd like for it to be visible upon return.
Here's the script I'm currently using - thanks for any help,
Louis

language="javascript" is unnecessary, and deprecated since HTML 4.01,
1999-12-24 CE.

function WM_toggle(id){

This is no constructor, by convention its identifier should not start with a
capital letter.

if (document.all){

var o = document.all[id];

if(document.all[id].style.display == 'none'){

if (o.style.display == 'none')
{

aso.

document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}

o.style.display = (o.style.display == 'none') ? '' : 'none';

return false;

You should fix that indentation.

} else if (document.getElementById){

This branch, representing the standards-compliant approach, should be the
first one. The document.all branch is only needed for compatibility with
IE 4 which is pretty much obsolete by now.

if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';

An element does not need to be a block element in order to be displayed.
There is no good reason not to set the initial value by assigning the empty
string in this branch as well.

} else {
document.getElementById(id).style.display = 'none';
}

It is very inefficient to call a method several times only to retrieve the
same reference as before.

var o = document.getElementById(id);

// see above
o.style.display = (o.style.display == 'none') ? '' : 'none';

return false;
}
}
</script>

Summarized:

function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}

function wm_toggle(id)
{
var o;

if (isMethod(document, "getElementById"))
{
o = document.getElementById(id);
}
else if (document.all)
{
o = document.all[id];
}

if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = (o.style.display == "none") ? "" : "none";
return false;
}

return true;
}


As for your question, since the following execution context does not retain
the properties of the preceding one, you will have to store the display
state of the respective elements in a way that it can be read by client-side
scripting later. One way to do that are cookies, but it might suffice to
modify the query part of the request made when submitting the form, and read
that query part afterwards. For example (quick hack):

<head>
...
<script type="text/javascript">
function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}

var getElemById = (function() {
if (isMethod(document, "getElementById"))
{
return function(id) {
return document.getElementById(id);
};
}
else if (document.all)
{
return function(id) {
return document.all[id];
};
}
else
{
return function() {
return null;
};
}
})();

function restoreDisplayState()
{
var state =
(document.URL.match(/[?&]displaystate=([^&#]+)/)
|| [0, null])[1];

if (state == 0)
{
var o = getElemById("bar");
if (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined")
{
o.style.display = "none";
}
}
}
</script>
</head>

<body onload="restoreDisplayState()">
<div id="bar">&nbsp;</div>
...
<form action="foo" method="post" onsubmit="return handleSubmit(this)">
<script type="text/javascript">
function getDisplayState(id)
{
var o = getElemById(id);
return (o && typeof o.style != "undefined"
&& typeof o.style.display != "undefined"
? (o.style.display == "none"
? 0
: 1)
: "");
}

function handleSubmit(f)
{
f.action += "?displaystate=" + getDisplayState("bar");
return true;
}
</script>
...
</form>
</body>


HTH

PointedEars