Div Tag refresh problem

jrp1982 · 10-31-2012, 01:02 PM

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>

Old Pedant · 10-31-2012, 08:58 PM

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!

Old Pedant · 10-31-2012, 09:30 PM

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.

Old Pedant · 10-31-2012, 09:40 PM

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>