CODEWITHSUNDEEP
xpages
Mike Gonzalez
Mike Gonzalez

Reputation: 157

xPages - How to set focus at different times on a page after refreshing

I've tried so many different things. I have an xpages that is refreshed multiple times and based upon the progression of inputs along the way, I want to focus on different fields. The latest is using an Output Script and the following code, however, it doesn't seem to be recognizing the viewScope variable so it focuses on the first field on the page or no focus at all. I set the viewScope variable at different times through the progression.

My questions:

  1. Where do I put the Output Script since only part of the page shows up at the beginning of the progression.

  2. What code can I use to be efficient and recognize the various places to focus?

  3. Is there a better way than Output Script?

Here is the code I'm using...

var vNextFocus = viewScope.vsNextFocus;
if(vNextFocus == "CustomerName") {
    XSP.getElementById("#{id:CustomerName}").focus();
}
if(vNextFocus == "PONbr") {
    XSP.getElementById("#{id:PONbr}").focus();
}

Etc......

Upvotes: 1

Views: 191

Answers (1)

Knut Herrmann
Knut Herrmann

Reputation: 30970

Your code is a mix of SSJS and CSJS.

Add an onClientLoad event to your XPage.
Calculate the client id which should be focused on with
#{javascript: ...get client id on server side...} on server side.
Put the result as a string into CSJS code XSP.getElementById("...").focus().
This way the field which is set in viewScope.vsNextFocus gets the focus.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
            XSP.getElementById("#{javascript:
                try {
                    getComponent(viewScope.vsNextFocus).getClientId(facesContext);
                } catch(e) {
                    getComponent('inputText1').getClientId(facesContext);
                }
            }").focus();
        ]]></xp:this.script>
    </xp:eventHandler>
    ... your controls ...
</xp:view>

Just in case viewScope.vsNextFocus is not set code defaults to field "inputText1".

Upvotes: 2

Related Questions