PrimeFaces 在 p:dialog 中嵌套表单，其中 appendTo="@(body)答案

【问题标题】：PrimeFaces nested form inside p:dialog with appendTo="@(body)PrimeFaces 在 p:dialog 中嵌套表单，其中 appendTo="@(body)
【发布时间】：2014-12-23 14:17:47
【问题描述】：

我有这个片段：

<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>

一切都按预期工作。

我想要实现的是：

<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>

但我没有成功地尝试将process 和update 组合为button1 导致处理任何事情...input1 甚至正在重置...

那么，如何构建一个p:dialog，它可以在片段或复合组合中传送，而从form 外部排除？

注意使用：

<h:form id="form">

    <!-- other content -->

    <ui:include src="panel.xhtml" />

    <!-- other content -->

</h:form>

<ui:include src="dialog.xhtml" />

不是一个可接受的解决方案。

我正在使用 JSF 2.2.8 (mojarra) 和 PF 5.1

【问题讨论】：

我想以开头包含并以
结尾是不可接受的？ :) 在我看来，无论如何你都会得到嵌套表单
不，这是不允许的 :) 但是我并没有试图避免嵌套表单，我试图在 appendTo 属性的帮助下使它们工作。根据 PF 对话框文档，这应该是可能的。
但是嵌套表单不是给您带来麻烦吗？我一直希望它不会通过 appendTo 在输出的 html 中嵌套。 primefaces 论坛上有一些关于它的讨论，也许你可以在那里找到一些东西
尝试使用表单名称而不是@form
Can you nest html forms? 的可能重复项

标签： jsf primefaces dialog nested-forms jsf-2.2

【解决方案1】：

只在对话框中使用一种形式。适合我。

<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>

【讨论】：

【解决方案2】：

最后，我找到了一种使用 OmniFaces 的方法，<o:moveComponent />：

页面：

<h:form id="form">

    <!-- other content -->

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

    <!-- other content -->

</h:form>

片段：

<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>

这会引起一些警告：

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

因为恢复的组件不会在后续的RESTORE_VIEW 上重新删除以进行回发。

就我的实验而言，这些警告是无害的，可以放心地忽略。

但是我打开a pull request 最终修复它。

【讨论】：