如何在CommandButton上隐藏p:panel单击 [英] How to hide p:panel on CommandButton click
问题描述
我想实现此处写的内容-如何隐藏并显示p:panel在命令按钮上单击，但hide()似乎不再可用...
I wanted to achieve what is written here - How to hide and show p:panel on commandbutton click but it seems, that hide() is not available anymore...
什么是正确的方法?
我尝试了toggle()，但是它没有隐藏它:
I tried toggle(), but it's not hiding it:
我真的必须在支持bean上具有一些panelVisibile属性并使用visible=#{.panelVisible}吗?
Do I really have to have some panelVisibile property on backing bean and use visible=#{.panelVisible}?
我正在尝试使用PrimeFaces 7.0.
I'm trying with PrimeFaces 7.0.
项目基于 https://github.com/Betlista/joinfaces-maven -jar-example
index.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>
结果
即使我在浏览器控制台中尝试了PF('testPanel')，也只有show()，没有hide().
Even when I tried PF('testPanel') in browser's console, there is only show() and no hide().
test1.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>
Test1View
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");
}
}
...但是它不起作用=仅在刷新后才隐藏/显示...
...but it is not working = it is hidden/shown only after refresh...
推荐答案
PF解决方案
最后，我也尝试了close()，发现它确实是我要寻找的东西，但这是一种具有效果的皮革:
PF solution
In the end, I tried close() as well and I found it is kind of what I'm looking for, but it is a hide with effect:
这不是事实，如果面板可见，则toggle()与close()相同:
It is not true, that toggle() is the same as close() for a panel if visible:
结果为(
jQuery :为此，我将
jQuery: For that, I'm defining 感觉根本不像PrimeFaces方法...在这样的设置中，我根本不需要使用 it just does not feel like PrimeFaces approach... In such a setup, I do not need to use 所有示例都可在 GitHub 上获得a>. All the examples are available on GitHub. 这篇关于如何在CommandButton上隐藏p:panel单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！closeable="true" closeSpeed=0
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>
替代解决方案
testPanelJqId定义为面板的类.Alternative solution
testPanelJqId as a class for the panel.<?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>
p:panel ... p:panel at all...<?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>
