Setting focus to first field of a tab on a tabbed table

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?

I would put the script on load right to field I want to be selected, or to panel inside tab. — Frantisek Kossuth
Frantisek, You response is very hard to understand but if you mean but the focus in the onload event of the field, it would not work. There is no onLoad event for a field. — Bruce Stemplewski
I am sorry about that. What works for me (not your scenario!): client JS in input field's onChange event handler, property onComplete, that focuses edit field that invoked partial refresh (was changed). So it is not onLoad event. Please, put some snippet of your page, I will try to adopt it to your scenario. — Frantisek Kossuth

Frantisek Kossuth Frantisek Kossuth · Accepted Answer · 2013-01-23T13:51:33

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

Setting focus to first field of a tab on a tabbed table

3 Answers