0

我有一个选项卡视图，每当用户选择该选项卡时，我想在其中刷新一个特定选项卡的内容。我还希望在刷新选项卡时弹出模式对话框。

这是带有 tabChange ajax 事件处理程序的 tabView

<p:dialog widgetVar="statusDialog" modal="true" draggable="false" minimizable="false" appendToBody="true"   closable="false" header="Processing..." resizable="false" maximizable="false">  
     <p:graphicImage library="assets" name="ajax-loader.gif"></p:graphicImage> 
</p:dialog>

<p:tabView id="tabview" orientation="top" dynamic="false">
    <p:ajax event="tabChange" listener="#{bean.tabChangeListener}"></p:ajax>
    <p:tab title="tab1">
        <ui:include src="/WEB-INF/views/tab1.xhtml"/>
    </p:tab>
    <p:tab title="tab2">
        <p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID" name="refresh" global="true" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"/>
        <ui:include src="/WEB-INF/views/tab2.xhtml"/>
    </p:tab>
</p:tabView>

这是tabChangeListener：

public void tabChangeListener(TabChangeEvent event) {
    if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
                RequestContext.getCurrentInstance().execute("refresh()");
    }
}

刷新 remoteCommand 正在按预期调用，但我的 statusDialog 从未显示。如果按钮触发了相同的 remoteCommand，则单击 statusDialog 会出现。JavaScript 控制台中没有错误。

为什么在 RequestContext.execute() 触发 remoteCommand 时不显示 statusDialog，我怎样才能让它出现？我什至尝试将 statusDialog.show() 添加到 execute() 但它没有帮助。

4

2 回答 2

1

我想到了。这是解决方案：

<h:outputScript>
var blockCount=0;
function showStatus() {
 if (blockCount==0) statusDialog.show();
 blockCount++;
};
function hideStatus() {
 blockCount--;
 if (blockCount==0) statusDialog.hide();
};
</h:outputScript>

<p:ajaxStatus onstart="showStatus();" onsuccess="hideStatus();" onerror="blockCount=0;statusDialog.hide();errorDialog.show();"/>  

<p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID" name="refresh" global="true" onstart="showStatus()" oncomplete="hideStatus()"/>

显然，我的状态对话框没有显示的原因是另一个 Ajax 调用完成并调用了 statusDialog.hide() 而我的 refresh() 事情正在进行。上面的 JS 代码维护了多少 Ajax 调用正在进行的计数器，并且只有在所有调用都完成后才会隐藏状态对话框。现在按预期工作！

于 2013-04-30T15:16:38.017 回答
0

如果要在更改特定选项卡时显示对话框，可以通过 ajax 响应添加回调参数来通知 js 函数，选项卡选择控件是否为 2：

public void tabChangeListener(TabChangeEvent event) {
    if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
                RequestContext.getCurrentInstance().addCallbackParam("index", 2);
    }
}

并使用：

 <p:ajax event="tabChange" listener="#{bean.tabChangeListener}"
     oncomplete="showOrNot(xhr,status,args)"></p:ajax>

这将调用 js 函数，它将控制更改的选项卡是否为 2：

function showOrNot(xhr,status,args) {
    if(args.index==2) {
        statusDialog.show();
    } 
}

或者不同的方法是定义一个值并使用visible以下属性p:dialog：

public void tabChangeListener(TabChangeEvent event) {
        if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
                    this.condition=true;
        }
    }

和<p:dialog visible="#{bean.condition}"/>。也许您需要专注于您的第一种方法，您可以p:dialog通过以下方式提供 ID 并更新它p:remoteCommand：

<p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID dialog" name="refresh" global="true" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"/>

不要忘记在 的更新属性中提供对话框的确切客户端 ID p:remoteCommand。

于 2013-04-23T16:28:12.373 回答