I'm using the IE webcontrols (obviously) trying to dynamically generate a
tabstrip based of a DTS package. I can get the tabstrip to show if I assign
the generation after the page completely loads and I trigger the execution to
a button/click/etc... However if I try to link the execution to onLoad I get
"dynaPage is undefined." DynaPage being the multipage I create dynamically.
Not sure why, and what I need to change to fix this. Any ideas?? Thanks in
advance!
<HTML>
<HEAD>
<TITLE>TabStrip Test</TITLE>
<script>
var lastPage = false;
function setupReport(oButton)
{
addPage("Test1","1");
addPage("Test2","2");
addPage("Test3","3");
lastPage = true;
addPage("Test4","4");
showPage(dynaPage);
hideButton(oButton);
}
function addPage(name, content)
{
var pageIndex = dynaPage.numPages;
var oNewPage = dynaPage.createPageAt(pageIndex);
oNewPage.setAttribute("id", name);
oNewPage.setAttribute("innerHTML", content);
addTab(name);
}
function addTab(pageID)
{
var tabElements = dynaTab.numItems;
var oNewTab = dynaTab.createTabAt(dynaTab.numItems);
oNewTab.setAttribute("text", pageID);
addTabSeparator();
}
function addTabSeparator()
{
var tabElements = dynaTab.numItems;
var oNewSep = dynaTab.createSeparatorAt(tabElements);
if (lastPage){oNewSep.setAttribute("defaultStyle","wi dth:100%;");}
}
function importBehaviors() {
tsNS = document.namespaces.add("ts","tabstrip.htc");
mpNS = document.namespaces.add("mp","multipage.htc");
tsNS.doImport("tabstrip.htc");
mpNS.doImport("multipage.htc");
var oTabStrip = document.createElement("ts:TABSTRIP");
var oMP = document.createElement("mp:MULTIPAGE");
oTabStrip.id = "dynaTab";
setTabStyle(oTabStrip);
oMP.id = "dynaPage";
setPageStyle(oMP);
oTabStrip.targetID = "dynaPage";
oReport.appendChild(oTabStrip);
oReport.appendChild(oMP);
}
function setTabStyle(tab)
{
var dStyle = "color:#AAAAAA; background-color:#EEEEEE;
border-color:#AAAAAA; ";
dStyle += "border-width:1px; border-style:solid; font-weight:bold; ";
dStyle += "font-family:Verdana; font-size:11px; height:37px; width:100px;
";
dStyle += "text-align:center;";
tab.setAttribute("tabDefaultStyle", dStyle);
tab.setAttribute("tabHoverStyle", "color:blue");
var sStyle = "color:#000000; background-color:#FFFFFF; border-bottom:none";
tab.setAttribute("tabSelectedStyle", sStyle);
var defStyle = "background-color:#FFFFFF; border-color:#AAAAAA; ";
defStyle += "border-width:1px; border-style:solid; border-top:none; ";
defStyle += "border-left:none; border-right:none;";
tab.setAttribute("sepDefaultStyle",defStyle);
}
function setPageStyle(page)
{
page.style.borderStyle="solid";
page.style.borderColor="#AAAAAA";
page.style.borderWidth="1px";
page.style.borderTop="none";
page.style.padding="10px";
page.style.visibility="hidden";
page.style.height="210px";
page.style.width="100%";
}
function hideButton(button)
{
button.style.visibility = "hidden";
}
function showPage(page)
{
page.style.visibility = "visible";
}
</script>
</HEAD>
<BODY onload="setupReport(document.all.generateButton);" >
<P ID="oReport">
<BUTTON ID="generateButton" onclick="setupReport(this);">Generate
Report</BUTTON>
</P>
</BODY>
</HTML>
--
~Greg
