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.

About ktatsuki

ケートリック株式会社 CEO & CTOをしています。 Notes/Dominoの開発を得意としますが、 C++ / Java / PHP / Javascript などの言語を使ってWEBアプリ、iPhone / Android アプリ開発などをしたりします。 XPagesの仕事をしているとテンションが通常の1.25倍ぐらい高くなります。 I am owner of KTrick Co., Ltd. and Notes/Domino developer. HCL Ambassador (IBM Champion for 2015 - current). I am interested in web application development and preferred languages are Notes/Domino, C++ / Java / PHP / Javascript.


メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください