SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show() Hide() Persistence

    I am using the below jQuery to show and hide a DIVs based which radiobutton is clicked (Page1). When the user continues to the next page and then uses their back button to return to the Page1, there radiobutton they selected is still selected, however the DIV related to that radiobutton selection is not. How do I set up thepage to have the div related to the radiobutton select persist when the back button is used?

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    $("#firstClick").click(function() {
     $("#first").show();
      $("#second").hide();
    	 });
    
    $("#secondClick").click(function() {
     $("#first").hide();
      $("#second").show();
    	 });
    </script>
    Code:
    <input name="radio" type="radio" id="firstClick" value="radio" checked="checked" />
    <input name="radio" type="radio" id="secondClick" value="radio"/>
    
    <div id="first">Hello 1st div</div>
    <div id="second" style="display:none">Hola 2nd div, adios First</div>
    Thanks everyone!!!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The reason this happens is that nothing persists - classes don't persist because DOM is regenerated, JS variables don't persist because code gets re-executed etc.
    At the same time, browser implementations seem to pretty much agree to keep user-entered form data for convenience even though this behaviour is not part of any official spec.

    One method to make the page remember which div was showing, would be to use local storage:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Local Storage persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
        <input name="radio" type="radio" id="secondClick" value="second"/>
        <p><a href="http://www.google.com">Leave page</a></p>
        
        <div id="first">Hello 1st div</div>
        <div id="second">Hola 2nd div, adios First</div>
    
        <script>
          $(document).ready(function() {
            var visible = localStorage['visible'];
            var hidden = localStorage['hidden'];
            
            if (typeof visible != 'undefined' && typeof hidden != 'undefined' ) {
              $(visible).show();
              $(hidden).hide();
            } else {
              $("#second").hide();
            }
          
            $('input[type=radio]').on("click", function() {
                $("#first, #second").toggle();
                if (localStorage) {
                  localStorage['visible'] = "#" + $(this).attr('value');
                  localStorage['hidden'] = "#" + $(this).siblings('input').attr('value');
                }
            });
          });
        </script>
      </body>
    </html>
    Although this works, I'm not sure this is the best way to do things, so if anyone else has any ideas, I'd be glad to hear them.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo, this is pretty close, the only issue I see is the toggle(), if you click the first radiobutton a second time it toggles the second div open. Any suggestions on how to fix this? Thanks for all your help!!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh dear, you're quite right.
    Attach your handler to the change event instead.
    I've updated my code:

    Code JavaScript:
    $(document).ready(function() {
      function showDivs(){
        if(typeof visible == 'undefined' && typeof hidden == 'undefined'){
          $("#second").hide();
        } else {
          $(visible).show();
          $(hidden).hide();
        }
      }
     
      $('input[type=radio]').on("change", function() {
        $("#first, #second").toggle();
        if (localStorage) {
          localStorage['visible'] = "#" + $(this).attr('value');
          localStorage['hidden'] = "#" + $(this).siblings('input').attr('value');
        }
      });
     
      var visible = localStorage['visible'];
      var hidden = localStorage['hidden'];
      showDivs();
    });

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was working a solution earlier for this, but couldn't quite get it to go. My thought was you could store whether a radio button was checked or not as a variable (true/false), then using an if statement trigger the hide() and show() based on that. I didn't post anything because I had/still have limited time to try it, but if you can get that working, it should do well for you. I'll mess with it more as I have time, and post back if I figure it out.

    EDIT: Here's the CodePen where I was messing with it. Maybe someone could fork & fix it? http://codepen.io/ronaldroe/pen/GyrEF

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    That's what we were looking for. Way to go Ron!
    You can boil the JS down to this:

    Code JavaScript:
    $(document).ready(function() {
      $('input[type=radio]').each(function(){
        if (!$(this).prop("checked")==true){
          $("#" + $(this).attr('value')).hide();
        }
      });
     
      $('input[type=radio]').on("change", function() {
        $("#first, #second").toggle();
      });
    })

    Here's the full code, just to be complete:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Show/hide persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
        <input name="radio" type="radio" id="secondClick" value="second"/>
        <p><a href="http://www.google.com">Leave page</a></p>
        
        <div id="first">Hello 1st div</div>
        <div id="second">Hola 2nd div, adios First</div>
    
        <script>
          $(document).ready(function() {
            $('input[type=radio]').each(function(){
              if (!$(this).prop("checked")==true){
                $("#" + $(this).attr('value')).hide();
              }
            });
            
            $('input[type=radio]').on("change", function() {
              $("#first, #second").toggle();
            });
          });
        </script>
      </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the feedback Pullo and Ron. This is working on two radiobuttons perfectly, however it turns out it needs to be scalable with multiple radiobuttons and divs so the $("#first, #second").toggle(); doesn't seem to work. Here is a sample with multiple divs and radiobuttons. Thoughts on how to replace the toggle()

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Show/hide persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <input name="radio" type="radio" id="firstClick" value="first" checked="checked" />
        <input name="radio" type="radio" id="secondClick" value="second"/>
        
         <input name="radio" type="radio" id="thirdClick" value="third"/>
          <input name="radio" type="radio" id="fourthClick" value="fourth"/>
        <p><a href="http://www.google.com">Leave page</a></p>
        
        <div id="first">Hello 1st div</div>
        <div id="second">Hola 2nd div, adios First</div>
              <div id="third">3rd base</div>
        <div id="fourth">FOURRRRRR</div>
    
        <script>
          $(document).ready(function() {
            $('input[type=radio]').each(function(){
              if (!$(this).prop("checked")==true){
                $("#" + $(this).attr('value')).hide();
              }
            });
            
            $('input[type=radio]').on("change", function() {
              $("#first, #second, #third, #fourth").toggle();
            });
          });
        </script>
      </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to work
    Code:
     $(document).ready(function() {
            $('input[type=radio]').each(function(){
              if (!$(this).prop("checked")==true){
                $("#" + $(this).attr('value')).hide();
              }
            });
            
    		
    		$("#firstClick").click(function() {
     $("#first").show();
      $("#second").hide();
       $("#third").hide();
    		  $("#fourth").hide();
    	 });
    
    $("#secondClick").click(function() {
     $("#first").hide();
      $("#second").show();
      $("#third").hide();
    		  $("#fourth").hide();
    		  
    	});	 
    	
    	$("#thirdClick").click(function() {
     $("#first").hide();
      $("#second").hide();
      $("#third").show();
    		  $("#fourth").hide();
    		  
    	});	   
    	
    		$("#fourthClick").click(function() {
     $("#first").hide();
      $("#second").hide();
      $("#third").hide();
    		  $("#fourth").show();
    		  
    	});	 
    		
    		 });

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,997
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi dude9er,

    This will work:

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?979327-Show()-Hide()-Persistence-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Show/hide persistence example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
     
      <body>
        <input name="radio" type="radio" id="firstClick" value="#first" checked="checked" />
        <input name="radio" type="radio" id="secondClick" value="#second"/>
        <input name="radio" type="radio" id="thirdClick" value="#third"/>
        <input name="radio" type="radio" id="fourthClick" value="#fourth"/>
        <p><a href="http://www.google.com">Leave page</a></p>
     
        <div id="first" class="showHide">Hello 1st div</div>
        <div id="second" class="showHide">Hola 2nd div, adios First</div>
        <div id="third" class="showHide">3rd base</div>
        <div id="fourth" class="showHide">FOURRRRRR</div>
     
        <script>
          $(document).ready(function() {
            $('input[type=radio]').each(function(){
              if (!$(this).prop("checked")==true){
    	    s = $(this).attr('value');
                $(s).hide();
              }
            });
     
            $('input[type=radio]').on("change", function() {
              $(".showHide").hide();
    	  s = $(this).attr('value');
              $(s).show();
            });
          });
        </script>
      </body>
    </html>

    When the radio button state changes, I'm hiding all the divs, then showing the one corresponding to what was clicked.

    Hope that helps.

  10. #10
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, this is perfect.

    Thanks Ron, for your help!!


Bookmarks

Posting Permissions

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