Hi everyone,
I need a little help with tabbed panels.
Let’s take the next scenario: I have a tabbed panel with two tabs, on the second tab I have a table with a row with some javascript code and a button (button2) that will execute this code. The row has conditional visibility that is controlled by a viewScope variable and a button (button1) will toggle this variable.
If I go to the second tab and click on button1 then I can see my table row but if I try to call the javascript function defined inside the table with button2 I get an ‘Object expected’ error.
This works fine in FF, the problem exists only on IE (version independently). It looks IE renders the page with a tabbed panel differently, and the defined js functions are not visible even though they are on the page.
I hope it wasn’t too messy, here is the sample code for it:
<xp:tabbedPanel id="tabbedPanel1">
<xp:tabPanel label="New Tab" id="tabPanel1"></xp:tabPanel>
<xp:tabPanel label="New Tab2" id="tabPanel2">
<xp:button id="button1" value="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="tab2Table">
<xp:this.action><![CDATA[#{javascript:viewScope.show = true}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:table id="tab2Table">
<xp:tr rendered="#{javascript:viewScope.show}">
<xp:td>
<xp:scriptBlock type="text/javascript">
<xp:this.value>
<![CDATA[
function test1() {
alert("test1");
}
]]>
</xp:this.value>
</xp:scriptBlock>
</xp:td>
<xp:td>
<xp:button id="button2" value="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.handlers>
<xp:handler type="text/javascript">
<xp:this.script><![CDATA[test1();]]></xp:this.script>
</xp:handler>
</xp:this.handlers>
</xp:eventHandler>
</xp:button>
</xp:td>
</xp:tr>
</xp:table>
</xp:tabPanel>
</xp:tabbedPanel>
Any help would be greatly appreciated.
Thank you!
Regards,
Tibor