我有一个panelgroup,它有一个outputText和一个href链接。我希望此面板组基于以下方式的复选框值进行渲染
问题:如果默认情况下未选中该复选框,并且用户点击复选框,则表单组未显示。我认为因为它没有在页面加载时渲染因此onClick它无法找到隐藏/显示任何范围
这是小组代码:
<h:panelGroup
styleClass="showMsg#{valNumber}"
rendered="#{dataItem.checkboxVal}">
<h:outputText
styleClass="showMsg#{valNumber}"
style="margin-top: 18px; text-align: center;"
value="Text Line1" escape="false"
rendered="#{dataItem.checkboxVal}" />
<f:verbatim>
<br />
</f:verbatim>
<h:outputText
styleClass="showMsg#{valNumber}"
style="text-align: center;" value="Text Line 2"
escape="false"
rendered="#{dataItem.checkboxVal}" />
<f:verbatim>
<br />
<wps:urlGeneration
<a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a>
</wps:urlGeneration>
</f:verbatim>
</h:panelGroup>
如果我单击复选框,则不显示面板组。这是我的点击javascript功能。
<h:selectBooleanCheckbox id="xyz" styleClass='mycheckbox#{valNumber}'
onclick="showShippingMsg(this,'#{valNumber}' ); "
function showShippingMsg(checkbox, valNum){
if(checkbox.checked){
$(".showMsg"+valNum).css("display", "block");
} else {
$(".showMsg"+valNum).css("display", "none");
}
}
答案 0 :(得分:0)
好吧,你总是可以使用JSF ajax功能。 以下是示例代码:
<h:panelGroupid="panel">
<h:panelGroup rendered="#{bean.checkboxValue}">
<!-- your content here -->
</h:panelGroup>
</h:panelGroup>
<h:selectBooleanCheckbox value="#{bean.checkboxValue}">
<f:ajax event="change" render="panel"/>
</h:selectBooleanCheckbox>
现在,当复选框值将true更改为false或false更改为true时(单击它时),ajax将触发bean中checkboxValue的setter方法,并将在您的JSF组件上启动重新呈现,其中id设置为render属性(在本例中为id="panel"
),如果checkboxValue为true,则应该呈现它。因此,如果checkboxValue为true,则呈现的h:panelGroup
属性也将为true,反之亦然。
在你的bean中,checkboxValue应该设置如下:
public boolean checkboxValue;
public void setCheckboxValue(boolean checkboxValue) {
this.checkboxValue = checkboxValue;
}
public boolean getCheckboxValue() {
return this.checkboxValue;
}
有道理吗?
修改强>
请注意,h:selectBooleanCheckbox
组件应嵌套在h:form
中,以便将checkboxValue发布到bean。
编辑2
如果使用ajax,你应该尝试重新渲染整个dataTable(如果dataTable存储大量数据,那不是一个好主意)。如果这对您不起作用,您可以尝试将面板组的styleClass设置为类似styleClass="your_panel_style_class#{valNumber} #{not dataItem.checkboxVal ? 'style_class_to_hide_panel' : ''}"
的内容,这将基于checkboxVal
设置base styleClass。然后摆脱面板上的rendered
属性。
.style_class_to_hide_panel {
display: none;
}
然后你可以尝试将它放在复选框的onlcick属性中
function togglePanel(valNumber) {
var panel = $('.your_panel_style_class' + valNumber);
if (panel === undefined) {
// find your panel and select it
}
panel.toggleClass('style_class_to_hide_panel');
}
不确定jQuery脚本的可靠性如何。
答案 1 :(得分:0)
您可以使用JSF ajax将复选框值提交给bean并重新呈现页面的一部分。一个常见的错误是尝试重新渲染具有呈现属性的相同元素。在这种情况下,如果您的初始渲染值为false
,则您的panelGroup根本不会渲染。因此,ajax rerender将无法在DOM中找到引用的ID。
我曾经创建一个带有ID的包装元素,它总是被渲染,所以我可以在ajax渲染属性中引用它的ID。当ajax触发渲染时,它可以更新它的子元素,可以选择渲染它。
一个简单的示例bean:
import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
@Named("test")
@ViewScoped
public class TestBean implements Serializable{
private static final long serialVersionUID = -1064219566884774973L;
private boolean checkboxValue;
public void setCheckboxValue(boolean checkboxValue) {
this.checkboxValue = checkboxValue;
}
public boolean getCheckboxValue() {
return checkboxValue;
}
}
和xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
<h:form>
<h:selectBooleanCheckbox value="#{test.checkboxValue}" >
<f:ajax event="change" render="wrapper"/>
</h:selectBooleanCheckbox>
</h:form>
<h:panelGroup id="wrapper">
<h:panelGroup rendered="#{test.checkboxValue}">
<h:outputText value="Checkbox selected" />
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
另一种解决方案,如果您不需要bean中的checkbox值,则仅在客户端使用它。这个xhtml不使用任何支持bean:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
<h:form>
<h:selectBooleanCheckbox binding="#{checkboxItem}" >
<f:ajax event="change" render="wrapper"/>
</h:selectBooleanCheckbox>
</h:form>
<h:panelGroup id="wrapper">
<h:panelGroup rendered="#{checkboxItem.value}">
<h:outputText value="Checkbox selected" />
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
答案 2 :(得分:0)
我尝试了以下方法并且工作正常。
<h:panelGroup
style="#{dataItem.checkboxVal ? 'display:block;':'display:none;'}"
styleClass="showMsg#{valNumber}">
<h:outputText
styleClass="showMsg#{valNumber}"
style="margin-top: 18px; text-align: center;"
value="Text Line1" escape="false"/>
<h:outputText
styleClass="showMsg#{valNumber}"
style="text-align: center;" value="Text Line 2"
escape="false"/>
<f:verbatim>
<wps:urlGeneration
<a id="xyz" href="<%wpsURL.write(out);%>">ContactUs</a>
</wps:urlGeneration>
</f:verbatim>
</h:panelGroup>