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?

What difference is there between the "new" and the "existing" xpage? Are you sure that the change to the existing xpage was compiled / built properly? No errors in the problem pane? Any difference if you remove the readonly flag from the target field? — Lothar Mueller, Jan 16 '14 at 14:46
The new XPage contains only the above code. The existing page contains other code. There are no compile errors relating to the existing XPage. Removing the read only flag does not make any difference. — , Jan 16 '14 at 15:28
Was there already an object on the containing Xpage with id="FullNameXY"? It would be useful to see the entire XPage in which it fails to help troubleshoot the problem. — David Navarre, Jan 16 '14 at 16:47
Post the source of the XPage where it *doesn't* work. Otherwise we're just guessing what the problem could be. — Tim Tripcony, Jan 16 '14 at 17:25
P.S. Never call `getComponent("id").getValue()` / `.setValue(value)`... bind your components to data (either a full-fledged data source or a scope variable), and reference that data when you want to retrieve or modify values. — Tim Tripcony, Jan 16 '14 at 17:29

score 2 · Accepted Answer · answered Jan 17 '14 at 07:27

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>

I just tested this and it works very well. Thanks a lot. I have two questions: why should getComponent().setValue() not be used? I have seen this method recommended by several people. Which syntax would I use to change a value bound to a data source rather than a field variable? — , Jan 20 '14 at 09:54
To manipulate your datasource directly you can use (if you have datasource:document1) `document1.setValue(fieldName:any,value:any)` for more Information about why to use the direct way and not getComponent read the answer from Tim http://stackoverflow.com/questions/18303862/which-is-the-most-efficient-way-to-access-the-value-of-a-control/18308694#18308694 — Michael Saiz, Jan 20 '14 at 15:58

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

1 Answers1