CODEWITHSUNDEEP
xpages
Bruce Stemplewski
Bruce Stemplewski

Reputation: 1343

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

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?

Upvotes: 1

Views: 812

Answers (3)

Frantisek Kossuth
Frantisek Kossuth

Reputation: 3524

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

Upvotes: 1

user1674918
user1674918

Reputation: 31

This might not be exactly what you´re looking for, but maybe it can be of some help..

Link -> How can I set focus to Edit Box inside repeat control?

Upvotes: 0

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

Try the HTML5 Autofocus attribute:

<xp:inputText id="field1" value="#{document.Field1}">
    <xp:this.attrs>
        <xp:attr name="autofocus" value="autofocus"></xp:attr>
    </xp:this.attrs>
</xp:inputText>

One caveat: The autofocus attribute is supported in all major browsers, except Internet Explorer.

Upvotes: 1

Related Questions