xPagesのTabbed PanelをPartial RefreshでAjax化させよう
xPagesのTabbed Panelってとても便利だと思うのですが、デフォルトだと、クリック毎にページ全体を読み直すのでかっこ悪い。
そこで、Partial Refreshを使ってAjax化させてみました。
<xp:panel id="container"> <xp:tabbedPanel id="tabbedPanel1"> <xp:this.selectedTab> <![CDATA[#{javascript:(null == sessionScope.selectedTabId) ? "tabPanel1" : sessionScope.selectedTabId}]]> </xp:this.selectedTab> <xp:tabPanel label="Tab1" id="tabPanel1"> Tab1のコンテンツが入ります。 <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container"> <xp:this.action> <![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel1"}]]></xp:this.action> </xp:eventHandler> </xp:tabPanel> <xp:tabPanel label="Other" id="tabPanel2"> Tab2のコンテンツが入ります。 <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container"> <xp:this.action> <![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel2"}]]> </xp:this.action> </xp:eventHandler> </xp:tabPanel> </xp:tabbedPanel> </xp:panel>ここでは、
１）各Tabの中にonclickイベントを作成。
２）Partial UpdateのElementに親タグのID"container"をRefreshIDに指定。
３）onclickイベントの中で、各タブごとに、selectedTabIdを以下のように指定する。
sessionScope.selectedTabId = "tabPanel1"しかし、これをデザインのプロパティからやろうとすると、操作が難しい（というか出来ない）ので、ソースをガシガシ書いていくのが吉です。
ちなみに、自分の環境では8.5.0までは "_10f.push is not a function"のエラーが出て上手く動いていなかったので、XPages Blogにある通り8.5.1にアップデートしたら問題は解消されました。
Partial refresh and Firefox 3.5, Safari, Opera on 8.5.0 - XPages Blog - The XPages Blog
I just stumbled upon this post in the 8.5 forum: it describes the known problem that partial refreshes on a Domino 8.5.0 server causes the message "_10f.push is not a function".
This happens with Firefox 3.5, Safari 4, Opera and I believe in IE 8, too.There is no workaround at least none I'm aware of but using full refreshes all the time.But: the solution is underway! This is fixed in the upcoming 8.5.1.
引用元: Partial refresh and Firefox 3.5, Safari, Opera on 8.5.0 - XPages Blog - The XPages Blog.
