Question

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

我正在使用p：命令按钮的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>

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

1 个答案: