Question

I have a front end code when click on button it will set the toggleButton to true which will render the center page. Instead calling the server for setting the toggle button to true, i want to do it within the browser as it make more sense. How to do that? My present code is below, which will set the toggle variable in server and then changes in the browser.

Current

xhtml

<p:commandButton value="create" action="#{mybean.showCreateForm}" />

<p:panel render#{mybean.showForm} />

Bean

public void showCreateForm(){
showForm=true;
}

Need to be

   <p:commandButton value="create" action="#{mybean.showCreateForm}"  onclick"showform=true"/>

    <p:panel render#{mybean.showForm} />

I just demonstrated in the above example which communicate the server before rendering createform. How should i do it in the client side only using Primefaces or JSF

Answer 1

i want to do it within the browser as it make more sense. How to do that?

Just use JavaScript/CSS the same way as you would do in a plain vanilla HTML webpage. Use display:none in CSS and then toggle to display='block' in JS. It’s not different in JSF as it ultimately also produces just HTML (open JSF page in browser, rightclick and View Source).

You only need to keep in mind that this way the JSF component tree is not in sync with the HTML DOM tree. So when the conditionally shown section contains one or more forms, then this way you’ll risk potential attack holes as the restriction to show or hide the form isn’t enforced by the server side anymore.