如何在 PrimeFaces 的 tabView 中单击特定选项卡时显示对话框答案

【问题标题】：How to show Dialog while clicking a specific tab in tabView of PrimeFaces如何在 PrimeFaces 的 tabView 中单击特定选项卡时显示对话框
【发布时间】：2013-12-03 21:31:37
【问题描述】：

我是 jsf 的新手，我正在使用 Primefaces 4.0 编写一个 tabView。当单击特定选项卡时，我想在我的 Backing Bean 中做一些事情，所以我尝试了这个：

页面：

<p:tabView effect="fade" effectDuration="normal">
            <p:ajax event="tabChange" listener="#{myConsoleBean.onTabChange}" update=":rightForm"/>

            <p:tab title="My">
            </p:tab>
            <p:tab id="statTab" title="Stat">
            </p:tab>
        </p:tabView>

支持 Bean：

public void onTabChange(final TabChangeEvent event) {
            TabView tv = (TabView) event.getComponent();
            int activeTabIndex = tv.getActiveIndex();
            System.out.println(activeTabIndex);
            if(activeTabIndex==1)//Stat tab clicked
            {                    
                //do something here...
            }
   }

到目前为止一切正常，但是由于某种原因，Backing Bean 很慢，我想在 Backing Bean 进行时显示一个包含进度条的对话框：

这样的对话框：

<p:dialog id="pBarDialog" header="Progressing..." widgetVar="dlg" modal="true" height="70" resizable="false" closable="false">  
    <h:outputText value="Please wait, we're generating your info..." />  
    <p:progressBar widgetVar="pbAjax" ajax="true" value="100" styleClass="animated">     </p:progressBar>  
 </p:dialog>

那么，当我单击“统计”选项卡时如何显示对话框？

【问题讨论】：

标签： primefaces tabview jsf-2.2

【解决方案1】：

解决方案是在对话框中使用可见属性：

<p:dialog id="pBarDialog" header="Progressing..." visible="#{myConsoleBean.showDialog}"
    modal="true" height="70" resizable="false" closable="false">

在你的 bean 中：

private boolean showDialog;

public void displayDialog() {
    showDialog = true;
}

public boolean getShowDialog() {
    return showDialog;
}

然后

 if(activeTabIndex==1)//Stat tab clicked
            {                    
                myConsoleBean.displayDialog();
            }

还要确保您的 ajax 组件更新对话框

【讨论】：

抱歉，我发现即使我点击其他选项卡也会显示对话框，我应该做些什么来修复它？
抱歉，我没有完全阅读您的问题，我错过了对话框只应出现在特定选项卡上的部分。查看我的更新答案
喜欢这个？ public void onTabChange(TabChangeEvent event) { TabView tv = (TabView) event.getComponent(); int activeTabIndex = tv.getActiveIndex(); if(activeTabIndex==1) { displayDialog(); goToUrl("myStat.xhtml"); } } private boolean showDialog; public void displayDialog() { showDialog = true; } public boolean getShowDialog() { return showDialog; }
但是，它在 "goToUrl("myStat.xhtml"); "done 之前没有显示任何内容。因为当我单击 Stat 选项卡时，它只是刷新“showDialog”，并且该方法在我的“goToUrl("myStat.xhtml"); 函数完成后返回。所以对话框会在事情完成后显示，而我希望对话框在 "goToUrl("myStat.xhtml"); 运行时显示。

【解决方案2】：

你可以这样做：

public void onTabChange(TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();
    int activeTabIndex = tv.getActiveIndex();
    System.out.println(activeTabIndex);
    if(activeTabIndex==1)//Stat tab clicked
    {                    
        //do something here...
    }
    if(activeTabIndex==2){
        RequestContext.getCurrentInstance().execute("PF('dlg').show()"); //For Primeface 4.0
        RequestContext.getCurrentInstance().execute("dlg.show()"); //Before Primeface 4.0
    }
}

【讨论】：

我不知道为什么它不起作用。但是我的问题已经通过 Emil Kaminski 的解决方案解决了。不过，非常感谢！
我相信这是一个很好的解决方案。如果可以的话，我会使用这个解决方案。不知道是不是我做错了什么。
你的 primefaces 版本是什么？
我使用 primefaces 4.0 版
好的，所以只使用RequestContext.getCurrentInstance().execute("PF('dlg').show()"); 当您选择 stat tab 时，您的 activeTabIndex 是多少？你有javascript错误吗？

【解决方案3】：

我想我解决了这个问题。看到this thread后，我使用了p:remoteCommand。

这是我的最终代码：

页面：

            <p:tabView effect="fade" effectDuration="normal">
            <p:ajax event="tabChange" listener="#{myConsoleBean.onTabChange}" oncomplete="dlg.hide()" update=":rightForm"/>
            <p:tab title="My">

            </p:tab>
            <p:tab id="statTab" title="Stat">
                <p:remoteCommand actionListener="#{myConsoleBean.goToUrl('myStat.xhtml')}" update=":rightForm" name="showStat" global="true" onstart="dlg.show()" oncomplete="dlg.hide()"></p:remoteCommand>
            </p:tab>
        </p:tabView>

        <p:dialog id="pBarDialog" header="Progressing..." widgetVar="dlg" modal="true" height="70" resizable="false" closable="false">  
            <h:outputText value="Please wait, we are generating your info..." />  
            <p:progressBar widgetVar="pbAjax" ajax="true" value="100" styleClass="animated">  
            </p:progressBar>  
        </p:dialog>

豆子：

 public void onTabChange(TabChangeEvent event) {
            TabView tv = (TabView) event.getComponent();
            int activeTabIndex = tv.getActiveIndex();
            if(activeTabIndex==1)
            {
                RequestContext.getCurrentInstance().execute("showStat()");
            }
   }

无论如何，谢谢你们，Lamq 和 Emil Kaminski。没有你的帮助，我永远找不到那个话题，因为我从你的答案中输入了关键词。

【讨论】：