Primefaces layout collapse and close not working?

Question

I'm using Full Page Layout control from Prime-faces. I have three layouts which are West, East and Center. West layout and East are collapsible. Also i have a button on West layout which has click event that is supposed to change Center layout content with another x html page. So the problem is, before clicking that button collapsing of the layouts are working well but after clicking the collapsing is not working. My X HTML code has included. Any Ideas of that problem please share me. Thanks.

<p:layout fullPage="true">
        <p:layoutUnit header="West" position="west" resizable="true" size="200" collapsible="true" >
            <h:form>                       
                 <h:commandButton value="button" action="#interfaceAjaxes.hit()}">
                          <f:param name="name" value="new.xhtml"/>
                          <f:ajax render=":form:mainContent"/>                            
                  </h:commandButton>
            </h:form>
        </p:layoutUnit>
        <p:layoutUnit position="east" header="East" collapsible="true" size="200">
            <h:form>

            </h:form>
        </p:layoutUnit>
        <p:layoutUnit position="center">
            <h:form id="form" style="background: transparent">
                <div>
                    <h:panelGroup id="mainContent">
                        <ui:include src="#{interfaceAjaxes.mainContent}"/>
                    </h:panelGroup>
                </div>
            </h:form>
        </p:layoutUnit>
    </p:layout>

Answer 1

I found it, obviously you only render the loaded page, not the other functionalities, so use:

<f:ajax render=":form:mainContent @all"/> 

instead of:

<f:ajax render=":form:mainContent"/>

Hope it is useful.