PrimeFaces 在 p:dialog 中嵌套表单，其中 appendTo="@(body) [英] PrimeFaces nested form inside p:dialog with appendTo="@(body)

问题描述

我有这个片段:

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

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

but I unsuccessfully tried some combination of process and update for button1 resulting in process anything... input1 is even resetting...

那么，如何构建一个 p:dialog 可以在片段或复合comp 中传送，并且从form 之外排除?

So, how to build a p:dialog that can be shipped inside a fragment or a composite comp and that is excluded from outside form?

注意使用:

<h:form id="form">

    <!-- other content -->

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

    <!-- other content -->

</h:form>

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

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

is not an acceptable solution.

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

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

推荐答案

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

Finally, I found a way using OmniFaces, with <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 中重新删除以进行回发.

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.

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

However I opened a pull request to eventually fix it.

这篇关于PrimeFaces 在 p:dialog 中嵌套表单，其中 appendTo="@(body)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！