CodingForums.com - Div Tag refresh problem

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Div Tag refresh problem (http://www.codingforums.com/showthread.php?t=280212)

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>

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!

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.

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>