问题

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...

What's the proper approach?

I tried toggle(), but it's not hiding it:

Do I really have to have some panelVisibile property on backing bean and use visible=#{.panelVisible}?

I'm trying with PrimeFaces 7.0.

Project is based on 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>

Result

Even when I tried PF('testPanel') in browser's console, there is only show() and no hide().

Trying workaround

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...

回答1:

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:

It is not true, that toggle() is the same as close() for a panel if visible:

It results in (test6.xhtml)

closeable="true"
closeSpeed=0
toggleable not needed

<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>

Alternative solution

jQuery: For that, I'm defining 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>

it just does not feel like PrimeFaces approach... In such a setup, I do not need to use p:panel at all...

PrimeFaces p:panel and id alternative

<?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>

All the examples are available on GitHub.

来源：https://stackoverflow.com/questions/59481613/how-to-hide-ppanel-on-commandbutton-click

标签

jsf

primefaces

How to hide p:panel on CommandButton click

问题

Trying workaround

回答1:

PF solution

Alternative solution

PrimeFaces p:panel and id alternative