DHTML tabbed table and how to retain field values when switching tabs

HCL Domino Domino Forum
1

I’ve found lots of code examples to create a nice clean tabbed table using DHTML and CSS (Domino’s tabbed table is horrible). Under each tab, I have a checkbox field that has multiple values. I’d like to be able to click on certain values in one tab, then go to the next tab, choose values from it’s list and then go back to tab 1 and see the values I selected - however, the values are lost - I understand this is due to the display property and the field value is lost - anyone know of an example of how to implement this??

Thanks!

2

Subject: RE: DHTML tabbed table and how to retain field values when switching tabs

If you’re just using DHTML to adjust the visibility of layers, I don’t see why values should be lost out of the fields. Maybe you should provide a little more detail about what you’re doing.

3

Subject: RE: DHTML tabbed table and how to retain field values when switching tabs

Ok - here’s what I have. THis code shows a nice formatted tabbed table - I have a checkbox field with 3 options on tab1. Everything looks good. Go to tab 1, select one of the options then go to another tab, and the option selection is completely lost.

HEAD content:

BODY content:

onclick=changeTabs() onload=init()

JS Header:

function changeTabs(){

if(firstFlag == true){

	currentTab = t1;

	tabBase = t1base;

	firstFlag = false;

}

if(window.event.srcElement.className == "tab"){

	currentTab.className = "tab";

	tabBase.style.backgroundColor = "white";

	currentTab = window.event.srcElement;

	tabBaseID = currentTab.id + "base";

	tabContentID = currentTab.id + "Contents";

	tabBase = document.all(tabBaseID);

	tabContent = document.all(tabContentID);

	currentTab.className = "selTab";

	

	tabBase.style.backgroundColor = "";

	tabContents.innerHTML = tabContent.innerHTML;

}

}

Then here is the actual passthru code located in a cell in a table:

<DIV

style=“BORDER-BOTTOM: gray thin; BORDER-LEFT: gray thin; BORDER-RIGHT: gray thin; BORDER-TOP: gray thin; HEIGHT: 350px; LEFT: 65px; WIDTH: 500px”>

<TABLE bgColor=white cellPadding=0 cellSpacing=0

style=“HEIGHT: 250px; WIDTH: 400px”>

<TD class=selTab height=25 id=t1>Infra</TD>

<TD class=tab id=t2>Service</TD>

<TD class=tab id=t3>Application</TD>

<TD class=tab id=t4>Information</TD>

<TD class=tab id=t5>Outsourcing</TD></TR>

<TD id=t1base style="BORDER-LEFT: white thin solid; HEIGHT: 1px"></TD>

<TD id=t2base style="BACKGROUND-COLOR: white; HEIGHT: 1px"></TD>

<TD id=t3base style="BACKGROUND-COLOR: white; HEIGHT: 1px"></TD>

<TD id=t4base style="BACKGROUND-COLOR: white; HEIGHT: 1px"></TD>

<TD id=t5base 

style="BACKGROUND-COLOR: white; BORDER-RIGHT: white thin solid; HEIGHT: 2px"></TD></TR>

<TD colSpan=5 height=* id=tabContents 

style="BORDER-BOTTOM: white thin solid; BORDER-LEFT: white thin solid; BORDER-RIGHT: white thin solid">sample 

  contents</TD></TR></TBODY></TABLE></DIV>

Consolidation & Migration

Option1

Option2

Option3

4

Subject: RE: DHTML tabbed table and how to retain field values when switching tabs

You aren’t merely changing the display value of tabs, you are using innerHTML to swap out the contents of an always-displayed element. Does the HTML of the hidden

change when you check a checkbox option in the displayed checkbox?

All your code should be doing is changing the display or visibilty setting of elements that are always sitting in the expected location.