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()");
    }
}

refresh remoteCommand が期待どおりに呼び出されていますが、statusDialog が表示されません。同じ remoteCommand がボタン クリックによってトリガーされると、statusDialog が表示されます。JavaScript コンソールにエラーはありません。

remoteCommand が RequestContext.execute() によってトリガーされたときに statusDialog が表示されないのはなぜですか? また、表示するにはどうすればよいですか? statusDialog.show() を execute() に追加しようとしましたが、役に立ちませんでした。

4

2 に答える 2

0

特定のタブが変更されたときにダイアログを表示する場合は、ajax 応答を介してコールバック パラメーターを追加することで、選択されたタブが 2 であるかどうかを js 関数に通知できます。

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}"/>。そして、おそらく最初のアプローチに集中する必要があり、次の方法で ID を指定しp:dialogて更新でき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 に答える