可见性 属性 在 XPage 上未按预期工作
Visibility property not working as expected on XPage
基于单选按钮组控件中的 value/selection,我想显示另一个包含编辑框控件的 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>
您需要刷新组件树中的组件才能show/hide 组件。所以用另一个 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>
基于单选按钮组控件中的 value/selection,我想显示另一个包含编辑框控件的 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>
您需要刷新组件树中的组件才能show/hide 组件。所以用另一个 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>