Render multiple forms using a4j:jsFunction - jsf-2

Question

I'm trying to render a different <h:form> using <a4j:jsFunction> in some other form. However its not working. The code I've implemented is as follows:
<t:div style="display:table-row; ">
<a4j:region>
<t:div style="display:table-cell; border:1px solid #608AA9;">
<h:form id="accordForm">
<rich:accordion id="accordId" switchType="client" activeItem="#{projectCreation.activeTab}">
<c:forEach var="proj" items="#{projectCreation.projects}">
<rich:accordionItem name="#{proj.description}">
<f:facet name="header">#{proj.description}</f:facet>
<h:form id="moduleAccord" rendered="#{proj.childCount>0}">
<rich:accordion id="moduleAccordId" switchType="client" activeItem="#{projectCreation.activeModuleTab}" onitemchange="moduleAccordionChange();">
<a4j:jsFunction name="moduleAccordionChange" execute="#all" render="#all" action="#{projectCreation.accordionItemChange}" />
<c:forEach var="mdle" items="#{proj.modules}">
<rich:accordionItem id="module#{mdle.id}" name="#{mdle.description}">
<f:facet name="header">#{mdle.description}</f:facet>
<h:form id="formodule#{mdle.id}" rendered="#{mdle.childCount>0}">
<t:dataList id="subModuleList" var="subMdle" value="#{mdle.subModules}" layout="unorderedList">
<a4j:commandButton id="subModuleCmd" value="#{subMdle.description}" action="#{projectCreation.fetchSubModuleDetails}">
<f:param name="subModuleId" value="#{subMdle.id}" />
</a4j:commandButton>
</t:dataList>
</h:form>
</rich:accordionItem>
</c:forEach>
</rich:accordion>
</h:form>
</rich:accordionItem>
</c:forEach>
</rich:accordion>
</h:form>
</t:div>
</a4j:region>
<h:form id="rightContent">
<t:div id="rightContentDiv">
<h:outputText id="selectedPage" value="#{projectCreation.creationModel.selectedPage}" />
<t:div id="projectDiv" style="display:table-cell;" rendered="#{projectCreation.creationModel.selectedPage=='Project'}">
<a4j:outputPanel ajaxRendered="true">
<ui:include src="/WEB-INF/facelets/project/editProject.xhtml"/>
</a4j:outputPanel>
</t:div>
<t:div id="moduleDiv" style="display:table-cell;" rendered="#{projectCreation.creationModel.selectedPage=='Module'}">
<a4j:outputPanel ajaxRendered="true">
<ui:include src="/WEB-INF/facelets/project/addModule.xhtml"/>
</a4j:outputPanel>
</t:div>
</t:div>
</h:form>
</t:div>
I'm trying to change the rendered page on selection of nested accordion module. I've checked in log that its working fine in controller but its not working as expected on facelet. Its working when I use switchType="server" however it reloads the page completely and I just want to render the rightContent form.

Answer 1

Have a look at this showcase example:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=accordion&sample=dynamic&skin=blueSky
Do not nest forms, HTML does not support this !
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?