Conditionally hidden edit box in a partially refreshed panel

问题

My custom control consists of a number of combo boxes and text input boxes within a panel. The combo box values depend on one another, so when a combo box is changed, a partial refresh is executed on the panel to refresh the values of the other combo boxes.

One of the text input boxes is also dependent on one of the combo boxes - let's say the combo box title is "Do you have any special requirements?" and the values are "Yes" and "No". If the value is "No" then the special_requirements text box is hidden, and saved as "N/A" to the document in a querySaveDocument event. If the value is "Yes" then the special_requirements text box is shown, and the user must fill it out, and their input is saved.

The problem I've been having is that if I compute the value of the "Visible" property of the text box, then it is shown/hidden appropriately, but any user input is cleared whenever the panel is refreshed - eg the user selects "Yes", inputs some text, then changes another of the combo boxes which causes a partial refresh - the text box is still shown, but is now empty.

Currently I am using a workaround where instead of computing the "Visible" property, I compute the CSS style, setting it to hidden when the text box is not required. However, this means a user could input to it despite selecting "No" in the combo box, so it is not an ideal solution. Is there are a way to preserve the user's previous input between refreshes, and remove it if the combo box option is changed from "Yes" to "No" using the "Visible" property?

回答1:

Assuming that Naveens example is the same problem like yours you have a simple problem with the JSF lifecycle: If a component is not visible during the Update Model Phase, the submitted content is not applied and gets lost.

Just change the rendering property to this:

<xp:this.rendered>
   <![CDATA[#{javascript:
      if( view.isRenderingPhase() ){
         return getComponent("comboBox1").getValue() == "Yes"
      }else{
         return true;
      }
   }]]>
</xp:this.rendered>

回答2:

I faced a similar issue some time back and I think you are facing the same. Here is what I found out.

Let's say in your panel you have combo box and then edit box (the order is important) with visibility of edit box is dependent on value of combo box. When you change the value of combo box the edit box is visible or hidden but its value gets cleared (refer below code snippet).

<xp:panel id="panel1">
    <xp:comboBox id="comboBox1">
        <xp:selectItem itemLabel="No" itemValue="No"></xp:selectItem>
        <xp:selectItem itemLabel="Yes" itemValue="Yes"></xp:selectItem>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="panel1">
        </xp:eventHandler>
    </xp:comboBox>
    <xp:inputText id="inputText1">
        <xp:this.rendered><![CDATA[#{javascript:getComponent("comboBox1").getValue() == "Yes"}]]></xp:this.rendered>
    </xp:inputText>
</xp:panel>

But if I swap the two components so that we have edit box and then combo box (remember, the order is important) and then change the value of combo box, the value in edit box is restored when edit box is visible again (refer below code snippet).

<xp:panel id="panel1">
    <xp:inputText id="inputText1">
        <xp:this.rendered><![CDATA[#{javascript:getComponent("comboBox1").getValue() == "Yes"}]]></xp:this.rendered>
    </xp:inputText>
    <xp:comboBox id="comboBox1">
        <xp:selectItem itemLabel="No" itemValue="No"></xp:selectItem>
        <xp:selectItem itemLabel="Yes" itemValue="Yes"></xp:selectItem>
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="panel1">
        </xp:eventHandler>
    </xp:comboBox>
</xp:panel>

It seems the value in components before the partial-refresh-triggering-component get submitted while others do not. Regarding the reason for this behavior, I have no idea! I would really like if some one could throw some light on this as this has led me to redesign my XPages quite a few times!

来源：https://stackoverflow.com/questions/14874923/conditionally-hidden-edit-box-in-a-partially-refreshed-panel

标签

xpages