【问题标题】：How to hide p:panel on CommandButton click如何在命令按钮单击时隐藏 p：面板
【发布时间】：2019-12-25 20:24:18
【问题描述】：

我想实现这里写的 - How to hide and show p:panel on commandbutton click 但似乎 hide() 不再可用......

正确的方法是什么？

我试过toggle()，但它没有隐藏它：

我真的必须在支持 bean 上有一些 panelVisibile 属性并使用 visible=#{.panelVisible} 吗？

我正在尝试使用 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()。

尝试解决方法

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");
    }

}

...但它不起作用 = 仅在刷新后隐藏/显示...

【问题讨论】：

对不起，我以为很清楚，但我添加了所有细节......
我认为是因为您缺少 bean 的范围。您将其命名为 ViewScoped 或 RequestScoped 但未命名，因此 panelVisible 的值正在重置，因为每次都在重新创建 bean。
@Melloware 感谢您的提示，但我尝试了 javax.enterprise.context.RequestScoped、javax.enterprise.context.SessionScoped、javax.faces.bean.RequestScoped 和 javax.faces.view.ViewScoped 但没有帮助，解决方法不起作用
方法是 close() 所以PF('testPanel').close() 而不是隐藏。或者你可以使用 toggle() 所以PF('testPanel').toggle() 会显示或隐藏它。
@Kukeltje 我不知道你为什么这么冒犯，冷静 ;-) 我在上面写过，我尝试过切换，从我的角度来看，隐藏与关闭不一样...

标签： jsf primefaces

【解决方案1】：

PF解决方案

最后，我也尝试了close()，我发现它是我正在寻找的东西，但它是一个有效的隐藏：

如果面板可见，toggle() 与 close() 相同是不正确的：

结果为 (test6.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 上找到。

【讨论】：

我想知道投反对票的原因，上面的例子很实用。也许不好（这就是我问这个问题的原因），但上面的代码在显示/隐藏面板方面起作用......
在您的“替代”示例中，您可以只使用 PF('panelWidget').jq.hide() 小部件的 jq 对象就是 Jquery 对象。所以你不必用 escapeClientId 等做 ID。