CommandButton in jsf - jsf

Question

In my code the CommandButton action does not work when I put it in the second or third PanelGroup. It only works when I put in the first PanelGroup. My code is shown below. What may be the problem?
<ui:define name="pageLocations">
<h:panelGroup layout="block" id="pageLocations">
<c:if test="#{param.typeTab == null && param.relationTab == null && param.propertyTab == null}">
<ui:param name="defaultHeaderTitle" value="Properties"/>
<!--<h:outputText value="Properties" />-->
</c:if>
<p class="breadcrumb">Admin <ezcomp:out value="raquo" />
Fields <ezcomp:out value="raquo" />
<strong>
#{param.pageHeaderTitle}#{defaultHeaderTitle}
</strong>
</p>
</h:panelGroup>
</ui:define>
<!--<ui:define></ui:define>-->
<ui:define name="pageHeaderTitle">
<h:outputText value="#{param.pageHeaderTitle}#{defaultHeaderTitle}" id="soso" />
</ui:define>
<ui:define name="sidemenu">
<ui:param name="fieldsPage" value="active"/>
</ui:define>
<ui:define name="admin-content">
<h:form prependId="false">
<h:panelGroup layout="block" class="well well-small" id="mainPanel">
<h:panelGroup layout="block" class="row-fluid">
<div class="span1"><ezcomp:out value="nbsp"/></div>
<div class="span4">
<ul class="nav nav-pills" style="margin-top:4px;margin-bottom:0">
<c:if test="#{param.typeTab == null && param.relationTab == null && param.propertyTab == null }">
<ui:param name="default" value="active"/>
<ui:param name="defaultHeaderTitle" value="Properties"/>
</c:if>
<li class="#{param.propertyTab} #{default}">
<p:commandLink value="Properties" immediate="true" update="mainPanel,fields,:soso,:pageLocations" >
<f:param name="propertyTab" value="active"/>
<f:param name="pageHeaderTitle" value="Properties"/>
</p:commandLink>
</li>
<li class="#{param.typeTab}">
<p:commandLink value="Types" immediate="true" async="true" update="mainPanel,fields,:soso,:pageLocations" >
<f:param name="typeTab" value="active"/>
<f:param name="pageHeaderTitle" value="Types"/>
</p:commandLink>
</li>
<li class="#{param.relationTab}">
<p:commandLink value="Fields Relations" immediate="true" update="mainPanel,fields,:soso,:pageLocations">
<f:param name="relationTab" value="active"/>
<f:param name="pageHeaderTitle" value="Fields Relations"/>
</p:commandLink>
</li>
</ul>
</div>
</h:panelGroup>
</h:panelGroup>
<h:panelGrid id="fields" width="100%">
<h:panelGroup layout="block" rendered="#{param.propertyTab == 'active' || default == 'active' }">
<ui:include src="property/properties.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{param.typeTab == 'active'}">
<ui:include src="type/types.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{param.relationTab == 'active'}">
<ui:include src="fields-relations.xhtml"></ui:include>
<h:commandButton value="Create" actionListener="#{fieldsRelationsController.createRelations()}" >
<f:ajax listener="#{fieldsRelationsController.createRelations()}"/>
</h:commandButton>
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>

Answer 1

It's because those panel groups are conditionally rendered based on a request parameter which is not present anymore in the subsequent POST request initiated by the command button.
When JSF processes the POST request, the rendered condition is also re-evaluated. Due to lack of the request parameter, it evaluates false, so the command button component won't be processed, so the associated action won't be invoked.
To fix this, you need to pass the request parameter responsible for calculating the result of the rendered attribute in a <f:param> of the command button.
<h:commandButton value="Create" action="#{fieldsRelationsController.createRelations}">
<f:ajax />
<f:param name="relationTab" value="active"/>
</h:commandButton>
(note that I've replaced the actionListener by action and removed the double f:ajax listener as well, I don't know what you were thinking, but I'll assume it to be a leftover of unthoughtful shoots in the dark)
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 5.