Question

When a user clicks on a tab of a tabbed table, I want to be able to set the focus tot the first field on that tab.

Each tab seems to only have one event mouse onclick. So I tried placing the following code in one of that tab’s onclick events.

var f = dojo.byId('#{id:NotInvitedMsg}');
if (f != null)
   f.focus();

But when I click on the tab nothing happens. And I mean nothing. The tab can no longer be selected and the script is never executed.

Any way around this?

Answer 1

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:tabbedPanel id="tabbedPanel1">
        <xp:tabPanel label="New Tab" id="tabPanel1">
            <xp:panel>
                <xp:inputText id="inputText1"></xp:inputText>
                <xp:eventHandler event="onClientLoad" submit="false">
                    <xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputText1}");
if (edit) {
    edit.focus()
}]]></xp:this.script>
                </xp:eventHandler>
            </xp:panel>
        </xp:tabPanel>
        <xp:tabPanel label="New Tab2" id="tabPanel2">
            <xp:panel>
                <xp:inputText id="inputText2"></xp:inputText>
                <xp:eventHandler event="onClientLoad" submit="false">
                    <xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputText2}");
if (edit) {
    edit.focus()
}]]></xp:this.script>
                </xp:eventHandler>
            </xp:panel>
        </xp:tabPanel>
    </xp:tabbedPanel>
</xp:view>

This is working code (tested on Chrome and IE9). It uses simple trick I saw few days ago (and I want to apologize to original author, I couldn’t manage to find the original post): to create onClientLoad event at XP/CC level, and to move event handler in source view into the panel body. Works like charm…