对话框内的 Primefaces 覆盖面板仅在附加到正文后才有效

Question

我有一个覆盖面板，用于选择输入文本的值。 如果覆盖面板附加到正文，它会正确显示并覆盖对话框。但在这种情况下，覆盖面板内的 ajax 监听器只会触发一次。第二次（以及所有其他时间）不从侦听器执行后备 bean 方法。 当我将 appendToBody 更改为 false 时，覆盖面板内的 ajax 侦听器每次都会触发，但覆盖面板不会显示在对话框的边框上。有解决方案吗？尝试使用 z-index 没有成功。

编辑： 使用以下覆盖面板代码，它可以工作：

<!-- if overlay is appended to body, it works only once -->
<p:overlayPanel widgetVar="#{widgetVar}" appendToBody="false" styleClass="clSelectionPanel" dynamic="true">

    <p:tree value="#{clContentController.getClRoot()}" var="element"
        selectionMode="single" draggable="false" droppable="false" dynamic="true">

        <p:ajax event="select" onstart="PF('#{widgetVar}').hide();" oncomplete="hitlistTableResized();"
            listener="#{clContentController.ok(element)}" immediate="true" update="@(.#{updateClass})" />

        <p:treeNode ...
    </p:tree>
</p:overlayPanel>

在输入文本时使用按钮添加值和清除值：

    <p:inputText value="#{curProperty.value}" readonly="true"
    required="#{curExtendedEntryField.required}" styleClass="editMaskChoiceInput">
</p:inputText>
<p:commandButton immediate="true"
    actionListener="#{clController.setSelectedObject(curProperty)}"
    oncomplete="PF('clSelectionPanelEditVar').loadContents('#{component.clientId}');"
    title="Add Value" process="@this" />
<p:commandButton immediate="true"
    actionListener="#{editPropertyBL.clearCSelection(curProperty)}" 
     title="Clear Value" update="@(.editMaskChoiceInput)" />

在我的例子中，诀窍是包含覆盖面板。我之前在输入文本字段迭代中已经这样做了，但现在我在表单下定义它：

<h:form id="editPropertyFormId">
<ui:include src="/sections/dialog/editPropertyDialog.xhtml" />

<ui:include src="/sections/dialog/clSelectOverlay.xhtml">
    <ui:param name="widgetVar" value="clSelectionPanelEditVar" />
    <ui:param name="updateClass" value="editMaskChoiceInput" />
</ui:include>

问候 奥利弗

Answer 1

下面的代码对我有用。包括您的代码和您正在使用的 JSF/Primefaces 版本。

         <p:dialog closable="true"
                  visible="true">
            <h:form>
                <p:inputText id="inputtext">

                </p:inputText>
                <p:overlayPanel for="inputtext">
                    <p:commandButton value="Click to test">
                        <p:ajax oncomplete="alert('test');"/>
                    </p:commandButton>
                    Overlay content
                </p:overlayPanel>
            </h:form>
        </p:dialog>`