XPages - Частичное обновление с использованием getComponent("ABC"). SetValue("XYZ")

Question

Я добавил следующий код в новый XPage, и он отлично работает:

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

Однако, когда я добавляю код в существующий XPage, он совсем не работает - я нажимаю кнопку, но ничего не происходит. В чем может быть проблема здесь?

Answer 1

Вот пример, как я мог бы изменить ваш код: Тим уже упоминал, что самая важная часть никогда не использует getComponent("id").getValue() привязать ваши компоненты к источнику данных или переменной области.

Также я бы не использовал <xp:input> поле для отображения значений, используйте <xp:text> элемент и переместить код в него, пока вы просто хотите отобразить вычисленное значение.

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