Render multiple forms using a4j:jsFunction

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.

A full page reload is what you get with `switchType="server"`. Use `switchType="ajax"` instead and get rid of the nested forms, reorganize your view or you'll spend a lifetime debugging. — kolossus, Jan 31 '13 at 15:20
@kolossus Its taking quiet long time in reloading the page with `switchType="ajax"` mode. Also I know that I shouldn't be nesting the forms as its not supported, however its not working that way and its implemented the same way in [Richfaces Showcase](http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=accordion&sample=dynamic&skin=blueSky). — dShringi, Feb 01 '13 at 03:37

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

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?

edited May 23 '17 at 12:12

Community

1
1

answered Jan 31 '13 at 13:50

Christophe Roussy

16,299
4
85
85

I've implemented it using the same Richfaces Showcase as you have mentioned. I'm aware of the fact that nested forms aren't supported but its working that way only. Have a look at the showcase, it has nested ``. – dShringi Feb 01 '13 at 03:41

Render multiple forms using a4j:jsFunction

1 Answers1