Question

根据radiobutton组控件中的值/选项，我想显示另一个包含编辑框控件的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

您需要刷新保留在组件树中的组件才能显示/隐藏组件。所以请用你的另一个div来包围你的stafMemberDept 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>

可见性属性在XPage上无法正常工作

1 个答案: