How to hide and show p: panel by pressing a command button

Question

i has the following problem:

I am new to JSF2 and in it.

I have a table on the page that will be filled with information after the user enters the row and clicks CommandButton. After clicking the button, I want it to be disabled before processing is complete.

To disable CommandButton, I do the following:

<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend" value="Calcular" actionListener="#{calcBean.getTrfs}" onclick="btnSend.disable()" oncomplete="btnSend.enable()" /> 

And then I have a panel where I want to show its contents:

 <p:panel id="outPanel" widgetVar="outpanel"> #{calcBean.result} </p:panel> 

How to hide this panel when the page loads for the first time?

How can I hide it when I press CommandButton, and only show it again if processing in my bean is successful?

Thanks.

Answer 1

solvable

I need to put

  closable="true" toggleable="true" 

in p: panel ... Thanks

Answer 2

I checked the following panels hide and show with p: commandButton in JSF,

try the following methods in jsf,

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

Answer 3

to show the panel after completing the ajax request, try the following:

  <p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend" value="Calcular" actionListener="#{calcBean.getTrfs}" onclick="btnSend.disable()" oncomplete="btnSend.enable();outPanel.show();" />