p：对话框未显示在 tabview 的选项卡中答案

【问题标题】：p:dialog not showing in tabs on tabviewp：对话框未显示在 tabview 的选项卡中
【发布时间】：2015-11-29 20:22:36
【问题描述】：

我对 JSF2 Primefaces 5.2 有一个奇怪的问题。这可以使用下面的代码轻松复制。

我正在使用 p:command 按钮的 onclick 在选项卡内（在 tabview 内）创建一个对话框。第一个选项卡，它工作正常。动态添加新选项卡后（使用 p:tabView 的 value 属性），该对话框在第二个选项卡上也可以正常工作。

但是，如果我再次单击第一个选项卡并单击命令按钮，则整个页面会变暗，并且我无法单击屏幕上的任何位置。

有什么想法吗？谢谢。

                <p:panel header="materials Pages" id="materialsPagesPanel">
            <p:commandButton value="+ Add material Page" id="addmaterialPage"
                                action="#{guideBean.addmaterialPage}" ajax="true" process="@this" update="createGuideForm"/>

        <p:tabView value="#{guideBean.materialComboList}" var="materialCombo" orientation="left" id="materialsTabs" activeIndex="#{guideBean.materialActiveTab}">
            <p:tab title="material Page #{materialCombo.pageNumber}">

                <div class="materialPageHeading"><h:outputText value="material Page #{materialCombo.pageNumber}"/></div>   

                <p:commandButton id="pickmaterialsButton" type="button" onclick="PF('dlg').show();" value="Pick materials" process="@this"/> 

                <p:dialog header="Search for materials" widgetVar="dlg" modal="true" width="900" height="600" resizable="false">

                        Testing
                    <br />
                    <p:commandButton value="Select" process="@this"
                                 action="#{guideBean.savematerialsFromPickList(materialCombo.pageNumber)}"
                                 oncomplete="PF('dlg').hide()">
                        </p:commandButton>
                </p:dialog>


            </p:tab>
        </p:tabView>


        </p:panel>

backing bean 中动态添加标签的代码：

    public String addmaterialPage() 
{
    MaterialCombo materialCombo = new MaterialCombo();
    //materialComboList is a class variable
    materialComboList.add(materialCombo);
    return "";
}

【问题讨论】：

您可以尝试手动修复对话框位置作为解决方案或最后进行测试。添加这个样式类定义：.change-position{ left:10px !important; top:10px !important;} 并在对话框中添加对应的styleClass="change-position" 属性。
我试过了，但问题仍然存在。添加 CSS 后，我在第一次点击时看到了弹出窗口的新位置。当我返回第一个选项卡（从第二个选项卡）并再次单击它时，我根本看不到弹出窗口。
您可以使用浏览器 Doveloper 工具检查对话框是否存在。
@lametaweb，我认为这个问题可以很容易地复制。我已将原帖中的代码修改为只有相关数据，请检查，谢谢。因此，如果在 tabview（每个选项卡内）内多次创建对话框，我认为它有问题，请告诉我

标签： javascript jsf-2 primefaces dialog popup

【解决方案1】：

问题在于widgetVar 属性创建了一个全局范围的 javascript 变量，因此您必须以如下方式修改您的页面代码：

           <p:panel header="materials Pages" id="materialsPagesPanel">
        <p:commandButton value="+ Add material Page" id="addmaterialPage"
                            action="#{guideBean.addmaterialPage}" ajax="true" process="@this" update="createGuideForm"/>

    <p:tabView value="#{guideBean.materialComboList}" var="materialCombo" orientation="left" id="materialsTabs" activeIndex="#{guideBean.materialActiveTab}">
        <p:tab title="material Page #{materialCombo.pageNumber}">

            <div class="materialPageHeading"><h:outputText value="material Page #{materialCombo.pageNumber}"/></div>   

            <p:commandButton id="pickmaterialsButton" type="button" onclick="PF('dlg#{materialCombo.pageNumber}').show();" value="Pick materials" process="@this"/> 

            <p:dialog header="Search for materials" widgetVar="dlg#{materialCombo.pageNumber}" modal="true" width="900" height="600" resizable="false">

                    Testing
                <br />
                <p:commandButton value="Select" process="@this"
                             action="#{guideBean.savematerialsFromPickList(materialCombo.pageNumber)}"
                             oncomplete="PF('dlg#{materialCombo.pageNumber}').hide()">
                    </p:commandButton>
            </p:dialog>


        </p:tab>
    </p:tabView>


    </p:panel>

【讨论】：