PrimeFaces nested form inside p:dialog with appendTo="@(body)

Question

I have this fragment:

Answer 1

Finally, I found a way using OmniFaces, with <o:moveComponent /> :

page:

<h:form id="form">

    <!-- other content -->

    <ui:include src="/fragment/with/inner/form.xhtml" />

    <!-- other content -->

</h:form>

fragment:

<ui:composition>    
    <p:inputText id="outerText" value="#{viewScope.text}" />

    <p:commandButton id="openButton" process="@form" update="@widgetVar(testDialog)"
        oncomplete="PF('testDialog').show()" value="open" />
    <o:moveComponent id="move" for=":#{facesContext.viewRoot.clientId}" destination="ADD_LAST">
        <h:form id="innerForm">
            <p:dialog id="dialog" widgetVar="testDialog" header="test dialog">
                <p:inputText id="innerText" value="#{viewScope.text}" />

                <f:facet name="footer">
                    <p:commandButton id="confirmButton" process="@form" update=":form"
                        oncomplete="if(!args.validationFailed) PF('testDialog').hide()" 
                        value="submit" />
                </f:facet>
            </p:dialog>
        </h:form>
    </o:moveComponent>
</ui:composition>

This will cause some warning:

WARNING Unable to save dynamic action with clientId 'form:innerForm:dialog' because the UIComponent cannot be found
WARNING Unable to save dynamic action with clientId 'form:innerForm:innerText' because the UIComponent cannot be found
WARNING Unable to save dynamic action with clientId 'form:innerForm:confirmButton' because the UIComponent cannot be found

because the restored components are not re-removed on subsequent RESTORE_VIEW for postback.

These warnings, as for my experiments, are harmless and could be safely ignored.

However I opened a pull request to eventually fix it.

Answer 2

Only use one form inside of dialog. Work fine for me.

<h:body>

<h:form id="OneFormId">
    <!-- Some content -->
</h:form>

<p:dialog id="MyDialogId" header="My Header Info"
    widgetVar="MyWidgetVarName" modal="true" appendTo="@(body)">
    <h:form id="MyFormId">
        <p:outputPanel>
            <p:messages id="MyMsgId" autoUpdate="true" />
            <h:panelGrid columns="2">
                <h:outputLabel for="usr" value="User:" />
                <p:inputText id="usr" value="#{MyManageBeanName.MyProperty}"
                    required="true" requiredMessage="User is required." />
            </h:panelGrid>
            <p:separator />
            <h:panelGrid columns="2">
                <p:commandButton value="Save" id="MyBtnSaveId"
                    styleClass="ui-priority-primary" icon="ui-icon-circle-check"
                    process="@form" />
                <p:commandButton value="Cancel" id="MyBtnCancelId"
                    onclick="PF('MyWidgetVarName').hide()"
                    styleClass="ui-priority-primary" icon="ui-icon-close"
                    process="MyBtnCancelId" />
            </h:panelGrid>
        </p:outputPanel>
    </h:form>
</p:dialog>

<h:form id="OtherFormId">
    <!-- Some content -->
</h:form>