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

Question

I have this snippet:

<h:form id="form"> <!-- other content --> <p:panel id="panel" header="test"> <p:inputText id="input1" value="#{viewScope.prop1}" required="true" /> <p:commandButton id="button1" process="@form" update="@form @widgetVar(dialog)" oncomplete="PF('dialog').show()" value="ok" /> </p:panel> <!-- other content --> </h:form> <p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true"> <h:form id="form2"> <p:inputText id="input2" value="#{viewScope.prop1}" required="true" /> <p:commandButton id="button2" process="@form" update="@form" value="ok" /> </h:form> </p:dialog> 

and everything works as expected.

What I would like to achieve is the following:

 <h:form id="form"> <!-- other content --> <!-- fragment start --> <!-- this fragment will be on its own file and included via ui:include (or inside composite component) --> <p:panel id="panel" header="test"> <p:inputText id="input1" value="#{viewScope.prop1}" required="true" /> <p:commandButton id="button1" process="@form" update="@form @widgetVar(dialog)" oncomplete="PF('dialog').show()" value="ok" /> </p:panel> <p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true" appendTo="@(body)"> <h:form id="form2"> <p:inputText id="input2" value="#{viewScope.prop1}" required="true" /> <p:commandButton id="button2" process="@form" update="@form" value="ok" /> </h:form> </p:dialog> <!-- fragment end --> <!-- other content --> </h:form> 

but I unsuccessfully tried some combination of process and update for button1 , which led to something process ... input1 performs a reset ...

So, how to build a p:dialog that can be sent inside a fragment or composite Comp and excluded from outside the form ?

Please note that using:

 <h:form id="form"> <!-- other content --> <ui:include src="panel.xhtml" /> <!-- other content --> </h:form> <ui:include src="dialog.xhtml" /> 

not an acceptable solution.

I'm on JSF 2.2.8 (mojarra) and PF 5.1

Answer 1

Finally, I found a way to use 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 result in 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 will not be reinstalled the next RESTORE_VIEW for postback.

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

However, I opened a transfer request in order to eventually fix it.

Answer 2

Use only one form inside the dialog box. Work well 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>