可見性屬性在XPage上無法按預期工作

Question

基於單選按鈕組控件中的值/選擇，我想顯示另一個包含編輯框控件的div。

代碼無法按預期方式工作。儘管範圍變量已設置，但當可見性設置爲false時，div再也不會再出現，並將單選按鈕選定值更改爲「是」。

我在做什麼不正確？

<div class="form-group"> 
       <label class="control-label col-sm-4">Membership</label> 
       <div class="col-sm-8"> 
<xp:radioGroup value="#{employeeBean.employee.stafMember}" binding="#{stafMember}" 
         id="stafMember"> 
         <xp:selectItem itemLabel="Yes" /> 
         <xp:selectItem itemLabel="No" />       
         <xp:eventHandler event="onchange" submit="true" 
          refreshMode="partial" refreshId="stafMemberDept" disableValidators="true"> 
          <xp:this.action><![CDATA[#{javascript:var thisVal = getComponent("stafMember").getValue(); 
viewScope.put("stafMember", thisVal);}]]></xp:this.action> 
         </xp:eventHandler> 
       </xp:radioGroup> 

       </div> 
      </div> 

      <xp:div styleClass="form-group" 
       id="stafMemberDept"> 
       <xp:this.rendered><![CDATA[#{javascript:var thisVal = viewScope.get("stafMember"); 
if(thisVal=="Yes"){ 
    return false; 
} 
else if (thisVal == "No"){ 
    return true; 
} 
else{ 
    return false; 
}}]]></xp:this.rendered> 
     <!-- just some fields to test the value of the radio group --> 
       <xp:text escape="true" id="computedField1" 
        value="#{javascript:stafMember.getValue()}"> 
       </xp:text> 
       <xp:text escape="true" id="computedField2"> 
        <xp:this.value><![CDATA[#{javascript:getComponent("stafMember").getValue()}]]></xp:this.value> 
       </xp:text> 
       <xp:text escape="true" id="computedField3"> 
        <xp:this.value><![CDATA[#{javascript:"v" + viewScope.get("stafMember") + "v"}]]></xp:this.value> 
       </xp:text> 
       <label class="control-label col-sm-4" 
        style="font-size: 75%"> 
        Department: 
       </label> 
       <div class="col-sm-8"> 
        <xp:inputText id="inputText1"></xp:inputText> 
       </div> 

      </xp:div> 

Answer 1

您需要刷新留在組件樹中的組件才能顯示/隱藏組件。所以圍繞你的stafMemberDept div與其他div，然後你刷新：

<xp:div id="divToBeRefreshed"> 
    <xp:div styleClass="form-group" id="stafMemberDept"> 
     <xp:this.rendered> 
      <![CDATA[#{javascript:var thisVal = viewScope.get("stafMember"); 
    if(thisVal=="Yes"){ 
     return false; 
    } 
    else if (thisVal == "No"){ 
     return true; 
    } 
    else{ 
     return false; 
    }}]]> 
     </xp:this.rendered> 
     <!-- just some fields to test the value of the radio group --> 
     <xp:text escape="true" id="computedField1" value="#{javascript:stafMember.getValue()}"> 
     </xp:text> 
     <xp:text escape="true" id="computedField2"> 
      <xp:this.value> 
       <![CDATA[#{javascript:getComponent("stafMember").getValue()}]]> 
      </xp:this.value> 
     </xp:text> 
     <xp:text escape="true" id="computedField3"> 
      <xp:this.value> 
       <![CDATA[#{javascript:"v" + viewScope.get("stafMember") + "v"}]]> 
      </xp:this.value> 
     </xp:text> 
     <label class="control-label col-sm-4" style="font-size: 75%"> 
      Department: 
     </label> 
     <div class="col-sm-8"> 
      <xp:inputText id="inputText1"></xp:inputText> 
     </div> 
    </xp:div> 
</xp:div>