xPagesのTabbed PanelをPartial RefreshでAjax化させよう

xPagesのTabbed Panelってとても便利だと思うのですが、デフォルトだと、クリック毎にページ全体を読み直すのでかっこ悪い。
そこで、Partial Refreshを使ってAjax化させてみました。

<xp:panel id="container">
<xp:tabbedPanel id="tabbedPanel1">
<![CDATA[#{javascript:(null == sessionScope.selectedTabId) ? "tabPanel1" : sessionScope.selectedTabId}]]>
<xp:tabPanel label="Tab1" id="tabPanel1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container">
<![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel1"}]]></xp:this.action>
<xp:tabPanel label="Other" id="tabPanel2">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="container">
<![CDATA[#{javascript:sessionScope.selectedTabId = "tabPanel2"}]]>


2)Partial UpdateのElementに親タグのID”container”をRefreshIDに指定。
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.