Xpages, tabbed panel, partial refresh does not change active tab

HCL Domino Domino Forum
1

Hello folks,

I seem to be missing something with the simplest application of partial refresh to a tabbed panel. While my project is a bit more complex than this, I simplified the problem to the following just to figure out what was going wrong and why.

I created a very simple xpage consisting of one computed label and a panel (id=refreshTarget) which has within it a tabbed panel with two tabs and a label in each tab panel with static content. Up to this point it works fine. Clicking on each tab in turn displays the appropriate tab panel content.

I then try changing the tab panels to do a partial refresh with the target element set to refreshTarget. I see that the partial refresh does execute, and the contents of the refreshTarget panel are in the AJAX response, but the active tab does not change. This seems to be the simplest application of partial refresh. Have I missed something? I would almost expect a partial refresh to be the default behavior of a tabbed panel click!

Thanks for any insight you might provide,

Rich

Source code of the xpage included for completeness

<xp:label id=“timestamp”>

xp:this.value</xp:this.value>

</xp:label>

<xp:panel id=“refreshTarget”>

<xp:tabbedPanel id=“tabbedPanel1” selectedTab=“tabPanel1”>

<xp:tabPanel label=“Tab One” id=“tabPanel1”>

<xp:label value="Your are in tab one" id="label1"></xp:label>

<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="refreshTarget">

</xp:eventHandler>

</xp:tabPanel>

<xp:tabPanel label=“Tab Two” id=“tabPanel2”>

<xp:label value="You are in tab 2" id="label2"></xp:label>

<xp:eventHandler event="onclick" submit="true"

  refreshMode="partial" refreshId="refreshTarget">

</xp:eventHandler>

</xp:tabPanel>

</xp:tabbedPanel>

</xp:panel>

2

Subject: You need to tell it which tab to be on…

When you refresh the tabbed panel it will always open to the default tab, you need to set a sessionScope to the tab id you want it to open to and then set it on the tab panel to open the sessionscope tab as default.

Look here for an example

3

Subject: Thanks for the info

Thanks for your input, and I have worked around the issue, but it still seems to an odd behavior. If you do a full refresh of the whole page without using partial refresh on the tabbed panel, the selected tab is not forgotten. It is as if by changing to partial refresh you are overriding the default behavior with an empty one (there is a new eventHandler tag added with no action) and you have to add back in the default behavior of activating the appropriate tab. Not the behavior I would expect for such a common use case.

I also found that you don’t necessarily need to use a scoped variable to hold the selected tab, you can set it directly in the action of the tab by using getComponent(“tabbedPanelID”) and then using its setSelectedTab() method. A full refresh doesn’t lose the active tab (tested by adding a button to my previous code that does nothing but a full update).