Visibility property not working as expected on XPage

Question

Based upon the value/selection in a radiobutton group control I want to display another div containing an edit box control.

The code does not work as expected. Although the scope variable is set, the div never appears again when the visibility is set to false and I change the radiobutton selected value to Yes.

What am I doing incorrect?

<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

You need to refresh a component that stays in the component tree in order to show/hide components. So surround your stafMemberDept div with annother div that you then refresh:

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