In Xpages make first field have focus

Question

I cannot get the first field (or any) on my Xpage to have focus when a new document is created.

I have entered

dojo.query("input[id$='loc1']")[0].focus();

in the onQueryLoad. I get the error:

Script interpreter error, line=1, col=6: [ReferenceError] 'dojo' not found

I thought basic dojo was loaded. I do not understand how to load dojo.

What is the easiest way to give a field focus?

Answer 1

If you add this code to your XPage

<xp:eventHandler
    event="onClientLoad"
    submit="false">
    <xp:this.script><![CDATA[
        try {
            var input = dojo.query("input[type='text']")[0]; 
            input.focus();
            input.selectionEnd = input.selectionStart;
        } catch (e) { }
    ]]></xp:this.script>
</xp:eventHandler>

then first input text field will get the focus and text in field will be deselected.

Answer 2

You seem to have picked a serverside script event. Usually you add an OutputScript element and add code like this (off my head might contain typos):

        XSP.addOnLoad(function(){
                XSP.byId("#{id:loc1}").focus();
                });

Does that work for you?

Update

Complete example, works here:

XPage:

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
        <xc:LayoutSample>
            <xp:this.facets>
                <xc:focusBaby xp:key="facetMiddle"></xc:focusBaby>
            </xp:this.facets>
        </xc:LayoutSample>
    </xp:view>

Custom control (where you have the named element, the second in my form)

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
        One&#160;
        <xp:inputText id="inputText1"></xp:inputText>
        <xp:br></xp:br>
        Two&#160;
        <xp:inputText id="inputText2"></xp:inputText>
        <xp:br></xp:br>
        <xp:scriptBlock id="scriptBlock1">
            <xp:this.value><![CDATA[XSP.addOnLoad(function(){
      XSP.getElementById("#{id:inputText2}").focus();
    });]]></xp:this.value>
        </xp:scriptBlock>
    </xp:view>

What did you do different?