我想实现这里写的东西 -如何在命令按钮单击上隐藏和显示 p:panel但看来,hide()
不再可用...
正确的做法是什么?
I tried toggle()
,但它并没有隐藏它:
我真的需要一些吗panelVisibile
支持 bean 的属性和使用visible=#{.panelVisible}
?
我正在尝试使用 PrimeFaces 7.0。
项目基于https://github.com/Betlista/joinfaces-maven-jar-example
索引.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Primefaces Test</title>
</h:head>
<h:body>
<h:form>
<p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
<h1>Testing</h1>
</p:panel>
<p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>
<p:commandButton onclick="PF('testPanel').hide();" value="Hide Panel" type="button"/>
</h:form>
</h:body>
</html>
Result
即使当我尝试过PF('testPanel')
在浏览器的控制台中,只有show()
and no hide()
.
尝试解决方法
测试1.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Primefaces Test</title>
</h:head>
<h:body>
<h:form id="form1">
<p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true" visible="#{test1View.panelVisible}">
<h1>Testing</h1>
</p:panel>
<p:commandButton value="Show Panel" actionListener="#{test1View.setPanelVisible(true)}" update="form1"/>
<p:commandButton value="Hide Panel" actionListener="#{test1View.setPanelVisible(false)}" update="form1" />
</h:form>
</h:body>
</html>
测试1视图
package app;
import org.primefaces.PrimeFaces;
import javax.enterprise.context.RequestScoped;
import javax.enterprise.context.SessionScoped;
//import javax.faces.bean.RequestScoped;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
@Named
//@SessionScoped
@ViewScoped
//@RequestScoped
public class Test1View implements Serializable {
boolean panelVisible = false;
public boolean isPanelVisible() {
return panelVisible;
}
public void setPanelVisible(boolean panelVisible) {
this.panelVisible = panelVisible;
PrimeFaces.current().ajax().update("form1:button_panel");
}
}
...但它不起作用=它仅在刷新后隐藏/显示...
PF溶液
最后,我尝试了close()
我也发现这正是我正在寻找的东西,但它是具有效果的隐藏:
这不是真的,toggle()
是相同的close()
对于面板(如果可见):
结果是(测试6.xhtml)
closeable="true"
closeSpeed=0
- 不需要可切换
<h:form>
<p:panel id="button_panel" widgetVar="testPanel" closable="true" closeSpeed="0">
<h1>Testing</h1>
</p:panel>
<p:commandButton onclick="PF('testPanel').show()" value="Show Panel" />
<p:commandButton onclick="PF('testPanel').close();" value="Close Panel" />
</h:form>
替代解决方案
jQuery: 为此,我定义testPanelJqId
作为面板的一个类。
<?xml version="1.0" encoding="UTF-8"?>
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Primefaces Test</title>
</h:head>
<h:body>
<h:form id="form1">
<div class="testPanelJqId">
<h1>Testing</h1>
</div>
<p:commandButton value="Show Panel" onclick="jQuery('.testPanelJqId').show()"/>
<p:commandButton value="Hide Panel" onclick="jQuery('.testPanelJqId').hide()" />
</h:form>
</h:body>
</html>
它只是感觉不像 PrimeFaces 方法...在这样的设置中,我不需要使用p:panel
根本...
PrimeFaces p:panel 和 id 替代方案
<?xml version="1.0" encoding="UTF-8"?>
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Primefaces Test</title>
</h:head>
<h:body>
<h:form id="form1">
<p:panel id="panel1">
<h1>Testing</h1>
</p:panel>
<p:commandButton value="Show Panel" onclick="jQuery(PrimeFaces.escapeClientId('form1:panel1')).show()"/>
<p:commandButton value="Hide Panel" onclick="jQuery(PrimeFaces.escapeClientId('form1:panel1')).hide()" />
</h:form>
</h:body>
</html>
所有示例均可在GitHub.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)