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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div Tag refresh problem

    Hello folks,

    I have this test tab set up that when you click on each button, it displays different information. I need it to retain the information when toggling back and forth between tabs. I tested this by placing inputs in 3 of the tags. Ill type something in one input filed in a tab, move on to the next tab, go back to the previous tab and the input data dissappears. I need it to keep the data populated regardless of which tab is clicked. Any help would be appreciated. Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Keith Parker (diades)" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
        //<![CDATA[
          function showData(oTab)
          {
            //get the display container
            var oContainer = document.getElementById('tab_content');
            //get the required data for display
            var oDataContainer = document.getElementById(oTab.id + '_content');
            //empty the display container;
            oContainer.innerHTML = "";
            //fill it up
            oContainer.innerHTML = oDataContainer.innerHTML;
          }
          onload = function()
          {
            showData(document.getElementById('tab_0'))
            return false;
          }
        //]]>
        </script>
        <style type="text/css">
        /*<![CDATA[*/
          #tab_container{
          }
          #tab_content{
    
          }
          button{
           border-bottom:none;
          }
          .cls_Hidden_Text{display:none}
        /*]]>*/
        </style>
      </head>
      <body>
    
    
    
        <div id="tab_container">
          <button onclick="return showData(this)" id="tab_0">Tab 0</button>
          <button onclick="return showData(this)" id="tab_1">Tab 1</button>
          <button onclick="return showData(this)" id="tab_2">Tab 2</button>
          <button onclick="return showData(this)" id="tab_3">Tab 3</button>
          <button onclick="return showData(this)" id="tab_4">Tab 4</button>
          <div id="tab_content"></div>
        </div>
        <div id="tab_0_content" class="cls_Hidden_Text">Div 0 content</div>
        <div id="tab_1_content" class="cls_Hidden_Text">Div 1 content</div>
        <div id="tab_2_content" class="cls_Hidden_Text"><input type="text"></div>
        <div id="tab_3_content" class="cls_Hidden_Text"><input type="text"></div>
        <div id="tab_4_content" class="cls_Hidden_Text"><input type="text"></div>
    
    
    
    
    
    
      </body>
    </html>
    Last edited by jrp1982; 10-31-2012 at 02:39 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Why why why would you code this:
    Code:
    //<![CDATA[
          function showData(oTab)
          {
            //get the display container
            var oContainer = document.getElementById('tab_content');
            //get the required data for display
            var oDataContainer = document.getElementById(oTab.id + '_content');
            //empty the display container;
            oContainer.innerHTML = "";
            //fill it up
            oContainer.innerHTML = oDataContainer.innerHTML;
          }
    Why copy the contents from a hidden <div> to a visible <div> instead of just changing WHICH <div> is shown and which is hidden????

    Because you copy from the hidden div to the visible div, *OF COURSE* you then WIPE OUT whatever was entered before! Because you are copying the *ORIGINAL* contents, again, and they did NOT contain any filled out field!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Try it this way:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Keith Parker (diades)" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
        /*<![CDATA[*/
          #tab_container{
          }
          #tab_content{
          }
          button{
           border-bottom:none;
          }
          #tab_content div {
              display : none;
          }
        /*]]>*/
        </style>
      </head>
      <body>
        <div id="tab_container">
          <button id="tab_0">Tab 0</button>
          <button id="tab_1">Tab 1</button>
          <button id="tab_2">Tab 2</button>
          <button id="tab_3">Tab 3</button>
          <button id="tab_4">Tab 4</button>
        </div>
        <div id="tab_content">
            <div id="tab_0_content" >Div 0 content</div>
            <div id="tab_1_content" >Div 1 content</div>
            <div id="tab_2_content" ><input type="text"></div>
            <div id="tab_3_content" ><input type="text"></div>
            <div id="tab_4_content" ><input type="text"></div>
        </div>
    
    <script type="text/javascript">
    //<![CDATA[
    (
       function( )
       {
          var buttons = document.getElementById("tab_container").getElementsByTagName("button");
          var tabs    = document.getElementById("tab_content").getElementsByTagName("div");
    
          for ( var b = 0; b < buttons.length; ++b )
          {
             buttons[b].type = "button"; // so they won't submit
             buttons[b].onclick = 
             function( ) 
             {
                 var find = this.id + "_content";
                 for ( t = 0; t < tabs.length; ++t )
                 {
                     tabs[t].style.display = 
                        tabs[t].id == find ? "block" : "none";
                 }
             }
         }
         tabs[0].style.display = "block";
      }
    )();
    
    //]]>
    </script>
    
      </body>
    </html>
    Note: If any of your content div's need to contain <div>s themselves this code would need a couple of minor adjustments.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Oh...heck...let me do it right.

    Here, this works no matter what you "content" divs contain:
    Code:
    <script type="text/javascript">
    //<![CDATA[
    (
       function( )
       {
          var buttons = document.getElementById("tab_container").getElementsByTagName("button");
          var kids    = document.getElementById("tab_content").childNodes;
          var tabs = [];
          for ( var k = 0; k < kids.length; ++k )
          {
              if ( kids[k].tagName == "DIV" ) { tabs.push(kids[k]); }
          }
    
          for ( var b = 0; b < buttons.length; ++b )
          {
             buttons[b].type = "button"; // so they won't submit
             buttons[b].onclick = 
             function( ) 
             {
                 var find = this.id + "_content";
                 for ( t = 0; t < tabs.length; ++t )
                 {
                     tabs[t].style.display = 
                         tabs[t].id == find ? "block" : "none";
                 }
             }
         }
         tabs[0].style.display = "block";
      }
    )();
    
    //]]>
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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