XPages comboBox values issue on partial refresh

Question

I have 2 combo boxes and 1 input text field. On change of the 1st combo I set some value in the input field and partial refresh the panel where the input field is.

OnComplete of this refresh, i partial refresh (using XSP partialRefreshPost) the panel of the 2nd combo box. This combo box value as you can see is just the 1st combo's value.

The problem is: The combo value is set but the input value is not! Although input's panel refresh comes first and on complete comes the combo's panel refresh. If i remove the code from inside the 2nd combo's value tab then the input field works. (or if i just remove the reference of the 1st combobox from the 2nd combobox then it works again).

The weird thing is: if i use a listbox instead of the second combo box then it works!!

The xpage design is:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:table>
        <xp:tr>
            <xp:td>
                <xp:comboBox id="comboBox1">
                    <xp:selectItem itemLabel="a" itemValue="a"></xp:selectItem>
                    <xp:selectItem itemLabel="b" itemValue="b"></xp:selectItem>
                    <xp:selectItem itemLabel="c" itemValue="c"></xp:selectItem>
                    <xp:eventHandler event="onchange" submit="true"
                        refreshMode="partial" refreshId="panel1">
                        <xp:this.action><![CDATA[#{javascript:var inputText1:com.ibm.xsp.component.xp.XspInputText = getComponent("inputText1");
inputText1.setValue("aaaaaa");}]]></xp:this.action>
                        <xp:this.onComplete><![CDATA[alert("refreshed panel1");
XSP.partialRefreshPost("#{id:panel0}",{onComplete: function(){alert("refreshed panel0");}});]]></xp:this.onComplete>
                    </xp:eventHandler></xp:comboBox></xp:td>
            <xp:td></xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td></xp:td>
            <xp:td></xp:td>
        </xp:tr>
    </xp:table>
    <xp:br></xp:br>

    <xp:br></xp:br>
    <xp:panel id="panel0">
        <xp:comboBox id="comboBox2">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var comboBox1:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
if(comboBox1.getValue()!=null){
    return comboBox1.getValue().toString();
}else{
    return "its empty";
}}]]></xp:this.value>
            </xp:selectItems>
        </xp:comboBox></xp:panel>
    <xp:br></xp:br>
    <xp:panel id="panel1">
        <xp:inputText id="inputText1"></xp:inputText>
    </xp:panel>
    <xp:br></xp:br>
    <xp:br></xp:br></xp:view>

Just replace 2nd combo with this and see....

<xp:listBox id="listBox1">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var comboBox1:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
if(comboBox1.getValue()!=null){
    return comboBox1.getValue().toString();
}else{
    return "its empty";
}}]]></xp:this.value>
            </xp:selectItems>
        </xp:listBox>

Any ideas?

Answer 1

When using a combobox, the first value in the list is the selected value. When you are using a list box, you have to choose a value from the list first. If you select a value, your example will fail too.

Because you are changing the allowed values of the combobox/listbox programmatically, and then try to set a value which is not longer in the list (the value is posted back to the server when doing a partial refresh), a validation error occurs, and the value of the inputText ('aaaaa') is not set in the backend.

You can add a xp:messages component inside of the panels, then you can see the error message.