javascript - p :dialog not showing in tabs on tabview

Question

我在使用 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>

支持 bean 中动态添加选项卡的代码:

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

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