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:

<!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:

//<![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:

<!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:

<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>