CSS lost after clicking on menu using JSF with PrimeFaces
css, java, jsf, layout, primefaces
Solution
You can't update `LayoutUnit`s, they don't have a renderer. Add a placeholder like `OutputPanel` inside the unit and update it instead.
Problem
When I click on a `p:menuitem` and update the contents of a layoutunit, I lose the layoutunit CSS style. However, if I refresh, the style reappears. Why is this? ``` <p:layout id="plantillaPrincipal" fullPage="true" > <p:layoutUnit id="cabe" position="north"> <h:form id="bmenu"> <p:menubar> <p:menuitem id="inicio" value="INICIO" actionListener="#{controlMenu.mostrarOpcion()}" update=":container"> <f:setPropertyActionListener value="inicio" target="#{controlMenu.opcion}"/> </p:menuitem> <p:menuitem id="tarifas" value="TARIFAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container"> <f:setPropertyActionListener value="tarifas" target="#{controlMenu.opcion}"/> </p:menuitem> <p:menuitem id="tasas" value="TASAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container"> <f:setPropertyActionListener value="tasas" target="#{controlMenu.opcion}"/> </p:menuitem> <p:menuitem id="dudas" value="DUDAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container"> <f:setPropertyActionListener value="dudas" target="#{controlMenu.opcion}"/> </p:menuitem> <p:menuitem id="consultas" value="CONSULTAS" actionListener="#{controlMenu.mostrarOpcion()}" update=":container"> <f:setPropertyActionListener value="consultas" target="#{controlMenu.opcion}"/> </p:menuitem> </p:menubar> </h:form> </p:layoutUnit> <p:layoutUnit id="container" position="center"> <h:form id="fcont"> <ui:insert name="panelInicio">...</ui:insert> </h:form> </p:layoutUnit> ``` This is the content of layoutunit to update ``` <ui:define name="panelInicio"> <h:form id="inicio" rendered="#{controlMenu.opcion=='inicio'}"> <p:panel id="pinicio">hola desde inicio</p:panel> </h:form> <h:form id="tarifas" rendered="#{controlMenu.opcion=='tarifas'}"> <p:panel id="ptarifas">hola desde tarifas</p:panel> </h:form> <h:form id="tasas" rendered="#{controlMenu.opcion=='tasas'}"> <p:panel id="ptasas">hola desde tasas</p:panel> </h:form> <h:form id="dudas" rendered="#{controlMenu.opcion=='dudas'}"> <p:panel id="pdudas">hola desde dudas</p:panel> </h:form> <h:form id="consultas" rendered="#{controlMenu.opcion=='consultas'}"> <p:panel id="pconsultas">hola desde consultas</p:panel> </h:form> </ui:define> ``` This is the managed bean ``` @ManagedBean @ApplicationScoped public class controlMenu { public String opcion=""; public String getOpcion() { return opcion; } public void setOpcion(String opcion) { this.opcion = opcion; } public controlMenu(){ } public void mostrarOpcion(){ System.out.print(opcion); } ```