XPages - Partial Refresh using getComponent("ABC").setValue("XYZ")

Question

I have added the following code to a new XPage and it works fine:

<xp:panel styleClass="DemoLeft" rendered="true">
    <xp:table styleClass="DemoLeft">
        <xp:tr>
            <xp:td>
                <xp:label value="First Name:" id="label1"></xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText id="FirstNameXY"></xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Last Name:" id="label2"></xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText id="LastNameXY"></xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Full Name:" id="label3"></xp:label>
                <xp:span id="F"></xp:span>
            </xp:td>
            <xp:td>
                <xp:inputText id="FullNameXY" readonly="true">
                </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:panel>

<xp:panel styleClass="DemoLeft" rendered="true">
    <xp:table styleClass="DemoLeft">
        <xp:tr>
            <xp:td>
                <xp:button id="button3" value="Set Full Name">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="partial" refreshId="FullNameXY">
<xp:this.action><![CDATA[#{javascript:var fName = getComponent("FirstNameXY").getValue();
var lName = getComponent("LastNameXY").getValue();
var fullName = fName+" "+lName;
getComponent("FullNameXY").setValue(fullName);}]]></xp:this.action>
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:panel>

However when I add the code to an existing XPage, it does not work at all - I click the button but nothing happens. What could be the problem here?

Answer 1

here a example how i would change your code: Tim already mentioned the most importent part never use the getComponent("id").getValue() bind your components to a data source or a scope variable.

Also i would not use a <xp:input> field to sisplay values, use the <xp:text> element and moved the code to it as long as you just want to display a calculated value.

<xp:panel styleClass="DemoLeft" id="Demo">
    <xp:table styleClass="DemoLeft">
        <xp:tr>
            <xp:td>
                <xp:label value="First Name:" id="label1"></xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    id="FirstNameXY"
                    value="#{viewScope.firstName}"
                    defaultValue="">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Last Name:" id="label2"></xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    id="LastNameXY"
                    value="#{viewScope.lastName}"
                    defaultValue="">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Full Name:" id="label3"></xp:label>
                <xp:span id="F"></xp:span>
            </xp:td>
            <xp:td>
                <xp:text id="FullNameXY">
                    <xp:this.value><![CDATA[#{javascript://
                    var ret = [];
                    if(viewScope.firstName)
                        ret.push(viewScope.firstName)
                    if(viewScope.lastName)
                        ret.push(viewScope.lastName)                    
                    return ret.join(" ");}]]></xp:this.value>
                </xp:text>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:panel>

<xp:panel styleClass="DemoLeft" rendered="true">
    <xp:table styleClass="DemoLeft">
        <xp:tr>
            <xp:td>
                <xp:button id="button3" value="Set Full Name">
                    <xp:eventHandler
                        event="onclick"
                        submit="true"
                        refreshMode="partial"
                        refreshId="FullNameXY">
                        <xp:this.action><![CDATA[#{javascript://}]]></xp:this.action>
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:panel>