show hide divs - show last state upon reload/post

Discussion in 'Javascript' started by ll, Apr 30, 2008.

  1. ll

    ll Guest

    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>
     
    ll, Apr 30, 2008
    #1
    1. Advertising

  2. ll

    Erwin Moller Guest

    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
     
    Erwin Moller, May 1, 2008
    #2
    1. Advertising

  3. ll wrote:
    > 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">


    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
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, May 1, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. middletree
    Replies:
    0
    Views:
    597
    middletree
    Oct 25, 2005
  2. Mike P
    Replies:
    7
    Views:
    941
  3. Mike P

    show/hide divs on checkbox click

    Mike P, Nov 14, 2007, in forum: ASP General
    Replies:
    1
    Views:
    253
    Dooza
    Nov 14, 2007
  4. Frances
    Replies:
    3
    Views:
    123
    Randy Webb
    Sep 9, 2005
  5. Csaba  Gabor

    Show/Hide of TD upon MouseOver/Out

    Csaba Gabor, Aug 19, 2008, in forum: Javascript
    Replies:
    0
    Views:
    340
    Csaba Gabor
    Aug 19, 2008
Loading...

Share This Page