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.

Answer 2

Try doing this bind the controls to a viewScope then it should work.

I always bind my components to something scope variable, field or bean because if you don't you can get lot's of strange value problems. That's my experience.

I've tested you code and my suggestion works as far as I can see.