Rich tab panel every page in the panel is executed

[derkd]

Hi all,

I have a problem using rich tab panel. I have multiple tabs and under every tap I include a page.
I have 2 pages with an input field and button and a page with a rich tree.

when I do a submit in the first page (with just the input field and button) my web application connects to a webservice to collect data. I see in the submit it also collects the data for the rich tree. How is that possible?

rich tab panel page

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 template="../layout/layout_opleiding.xhtml">

 <ui:define name="content">
 <a4j:include viewId="../status.xhtml"/>

 <rich:tabPanel id="tabPanel" height="450" selectedTab="#{indexAction.selectedOpleidingTab}" switchType="server">
 <rich:tab name="lettercombinatie" label="Lettercombinatie">
 <ui:include src="lettercombinatie.xhtml"/>
 </rich:tab>
 <rich:tab name="trefwoord" label="Trefwoord">
 <ui:include src="trefwoord.xhtml"/>
 </rich:tab>
 <rich:tab name="soi" label="SOI">
 <ui:include src="soi_sectoren.xhtml"/>
 </rich:tab>
 </rich:tabPanel>

 </ui:define>

</ui:composition>

first page with input field and button

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 template="../layout/layout.xhtml">

 <ui:define name="body">
 <style type="text/css">
 a:link {color: #000000}
 a:visited {color: #000000}
 a:hover {color: #FF0000}
 </style>

 <script src="../js/opleiding.js" type="text/javascript"></script>
 <script src="../js/formEnterIE.js" type="text/javascript"></script>
 <h:form>
 <ui:param name="lettercombinatieParameter" value="#{indexAction.selectedOpleidingTab}">lettercombinatie</ui:param>
 <h:panelGrid columns="1" width="100%">
 <s:validateAll>
 <s:decorate id="idOpleidingZoekOpleidingComb" template="../layout/validate.xhtml">
 <ui:define name="label">Zoekterm:</ui:define>
 <h:inputText id="zoekOpleidingComb" value="#{zoekOpleidingAction.zoekLettercombinatie}" onkeypress="return submitEnter(this, event, 'zoekLettercombButton')"
 style=" width : 350px;" required="true">
 <a4j:support event="onkeyup" ajaxSingle="true" bypassUpdates="true"
 reRender="idOpleidingZoekOpleidingComb" requestDelay="2000"
 ignoreDupResponses="true" limitToList="true"/>
 </h:inputText>
 </s:decorate>
 <br />
 <a4j:commandButton id="zoekLettercombButton" value="Zoek" action="#{zoekOpleidingAction.findOpleidingLetterCombinatie}"
 type="submit" reRender="lettercombOpleiding, closedFacet, openFacet, idOpleidingZoekOpleidingComb"
 eventsQueue="opleidingLetterQueue" ignoreDupResponses="true"/>


 <rich:dataList id="lettercombOpleiding" var="_opleiding" value="#{lettercombinatieOpleidingen}">

 <a4j:commandLink id="opleidingComb" action="#{zoekOpleidingAction.retrieveOpleidingRelatieEnd(_opleiding, true)}" oncomplete="registreer('#{zoekOpleidingAction.opleidingRelaties.cdOpleidingsnaam}+#{zoekOpleidingAction.opleidingRelaties.omsOpleidingsnaam}+#{zoekOpleidingAction.opleidingDetail.opleidingNiveauBemiddeling.cdOpleidingNiveauBemiddeling}+#{_opleiding.cdOpleidingsnaam}+#{_opleiding.omsOpleidingsnaam}')">#{_opleiding.omsOpleidingsnaam}</a4j:commandLink>

 <h:outputText id="whiteSpace" value=" " />
 <a4j:commandLink id="opleidingInfoLink" action="#{zoekOpleidingAction.retrieveOpleidingRelatie(_opleiding)}"
 oncomplete="Richfaces.showModalPanel('informationOpleidingPanel');" reRender="selectedOpleiding"
 eventsQueue="opleidingLetterQueue" ignoreDupResponses="true">

 <h:graphicImage id="informationComb" style="border-width:0" value="../images/I.png" />


 </a4j:commandLink>
 </rich:dataList>
 </s:validateAll>
 </h:panelGrid>

 </h:form>

 <a4j:include viewId="toonOpleidingInfo.xhtml" ajaxRendered="true"/>

 </ui:define>

</ui:composition>

page with the tree

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 template="../layout/layout.xhtml">

 <ui:define name="body">
 <script src="../js/opleiding.js" type="text/javascript"></script>
 <script src="../js/formEnterIE.js" type="text/javascript"></script>
 <style type="text/css">

 .row1 {
 background-color: #ffffff;
 font-size: 10px;
 border: 0px;
 }
 .col1 {
 background-color: #ffffff;
 font-size: 10px;
 border: 0px;
 border-right-color: #ffffff;
 border-bottom-color: #ffffff;
 }
 .richPanel {
 vertical-align:top;
 }
 .rich-sdt-row-active {
 color: #0092CE;
 /*background-color: #0092CE;*/ /*won't work due to a bug in richfaces 3.1.6.SR1, the color attribute is leading.*/
 }
 .rich-tree-node-selected{
 border-color: #0092CE;
 border-width: medium;
 }
 .rich-tree-node-highlighted{
 color: red;
 }
 a:link {color: #000000}
 a:visited {color: #000000}
 a:hover {color: #FF0000}

 </style>
 <h:form>
 <ui:param name="soiParameter" value="#{indexAction.selectedOpleidingTab}">soi</ui:param>
 <h:panelGrid columns="2" width="100%" columnClasses="richPanel">

 <rich:panel>

 <rich:tree id="treeSOI" style="width:300px" nodeSelectListener="#{SOITreeBean.processSelection}"
 switchType="ajax" ajaxSubmitSelection="true" value="#{SOITreeBean.treeNode}" var="_niveau"
 nodeFace="#{_niveau.type}" stateAdvisor="#{SOIStateAdvisor}" binding="#{soiTreeBinding.soiTree}"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true">

 <rich:treeNode type="soiOpleidingNiveau" ajaxSubmitSelection="false"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 icon="../images/transparentpixel.png" iconCollapsed="../images/plusmap16x16.png"
 iconExpanded="../images/minmap16x16.png">
 <h:outputText value="#{_niveau.omsSoiOpleidingNiveau}"></h:outputText>
 </rich:treeNode>
 <rich:treeNode type="soiOpleidingSector" ajaxSubmitSelection="false"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 icon="../images/transparentpixel.png" iconLeaf="../images/plusmap16x16.png"
 iconCollapsed="../images/plusmap16x16.png" iconExpanded="../images/minmap16x16.png">
 <h:outputText value="#{_niveau.omsSoiOpleidingSector}"></h:outputText>
 </rich:treeNode>
 <rich:treeNode id="soiOpleidingRubriek" type="soiOpleidingRubriek" ajaxSubmitSelection="true"
 icon="../images/transparentpixel.png" iconLeaf="../images/plusmap16x16.png"
 iconCollapsed="../images/plusmap16x16.png" iconExpanded="../images/minmap16x16.png"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true">
 <h:outputText value="#{_niveau.omsSoiOpleidingRubriek}"></h:outputText>
 </rich:treeNode>
 <rich:treeNode id="hoofdOpleidingenNodes" type="hoofdOpleiding" ajaxSubmitSelection="false"
 icon="../images/transparentpixel.png" iconLeaf="../images/plusteken16x16.png"
 iconCollapsed="../images/plusteken16x16.png" iconExpanded="../images/minteken16x16.png"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true">
 <h:outputText value="#{_niveau.omsOpleidingsnaam}"/>
 </rich:treeNode>
 <rich:treeNode id="opleidingenNodes" type="opleiding" ajaxSubmitSelection="false"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 iconLeaf="../images/min16x16.png">
 <a4j:commandLink id="opleidingLink" action="#{SOITreeBean.retrieveOpleidingRelatieEnd(_niveau, true)}"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 oncomplete="registreer('#{SOITreeBean.opleidingRelaties.cdOpleidingsnaam}+#{SOITreeBean.opleidingRelaties.omsOpleidingsnaam}+#{SOITreeBean.opleidingDetail.opleidingNiveauBemiddeling.cdOpleidingNiveauBemiddeling}+#{_niveau.cdOpleidingsnaam}+#{_niveau.omsOpleidingsnaam}')">#{_niveau.omsOpleidingsnaam}</a4j:commandLink>
 <h:outputText id="whiteSpace" value=" " />
 <a4j:commandLink id="opleidingInfoLink" action="#{bocHelper.retrieveOpleidingRelatie(_niveau)}"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 oncomplete="Richfaces.showModalPanel('informationOpleidingPanelTree');" reRender="selectedOpleiding">
 <h:graphicImage id="information" style="border-width:0" value="../images/I.png" />
 </a4j:commandLink>
 </rich:treeNode>
 </rich:tree>

 <a4j:poll interval="100" action="#{SOITreeBean.openTreeNodes()}" reRender="treeSOI" enabled="#{SOITreeBean.pollingEnabled}"
 eventsQueue="soiOpleidingQueue" ignoreDupResponses="true" focus="#{SOITreeBean.setFocusToID}" />

 </rich:panel>


 <rich:panel>

 <h:inputText id="zoekOpleiding" value="#{SOITreeBean.zoekSOI}"
 onkeypress="return submitEnter(this, event, 'zoekSOISectorButton')" style=" width : 350px;"/>
 <h:commandButton id="zoekSOISectorButton" value="Zoek" action="#{SOITreeBean.findOpleidingSOI}" type="submit" />

 <rich:messages/>

 <rich:scrollableDataTable id="soiResult" rowKeyVar="rkv"
 value="#{SOITreeBean.soiOpleidingen}" var="_opleiding" columns="1" rows="50"

 width="550px" rowClasses="row1" columnClasses="col1" height="400px"
 selection="#{SOITreeBean.selection}" eventsQueue="soiOpleidingQueue" ignoreDupResponses="true">

 <a4j:support event="onRowDblClick" action="#{SOITreeBean.openOpleidingSOI}" />
 <rich:column width="550px">
 <h:outputText>#{_opleiding.omsOpleidingsnaam}</h:outputText>
 </rich:column>

 </rich:scrollableDataTable>
 <a4j:commandButton id="oplInfo" rendered="#{SOITreeBean.results}" value="Meer info"
 action="#{SOITreeBean.retrieveOpleidingRelatie()}" eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"
 oncomplete="Richfaces.showModalPanel('informationOpleidingPanelTree');" >
 </a4j:commandButton>
 <h:outputText id="whiteSpace" value=" " />
 <a4j:commandButton id="oplOpen" rendered="#{SOITreeBean.results}" value="Open"
 action="#{SOITreeBean.openOpleidingSOI}" type="submit" eventsQueue="soiOpleidingQueue" ignoreDupResponses="true"/>

 </rich:panel>

 </h:panelGrid>

 </h:form>

 <a4j:include viewId="toonOpleidingInfoTree.xhtml" ajaxRendered="true"/>

 </ui:define>

</ui:composition>

When I just open the pages without the rich tab panel everything works like expected.

Can somebody help me out with this?
I use Seam 1.2.1 and richfaces 3.1.6SR.

[kukeltje]

Like Ilya or Nick would say... try the latest Richfaces first. Not that you should use them in producion, but just to make sure it is not by accident a bug in an old release. You could also search the Jira for issues in this direction etc...

[derkd]

Thanks for you answer. Unfortunatly I'm stuck with RF 3.1.6 and seam 1.2.1 because of Oracle as 10.1.3.4.
As I said before it must have something to do with the rich panel...

[ilya_shaikovsky]

try to wrap the lettercombinatie include with a4j:region with renderRegionOnly=true.. You will be able to reRender only components from the region but autoupdates of the components outside should not happens.

[derkd]

Hi Ilya,

Once again you helped me out, it worked! Thank you so much!!

Regards,

Derk

[bitec]

This "autoupdate" possibility of tabs is really strange...<a4j:region renderRegionOnly="true" ..> helps to avoid rerendering of other tabs, but it prevents any update on the page outside of the tab as though. Imagine I have two tabs and some navigation menu at the top with some controls. These controls should be updated after some actions on the tab. But "renderRegionOnly" prevents this...

Another issue: I have the modalPanel on the tab with some inputs and a button on it, after submitting the ONE input field on the tab is rerendered. But now I see, that after submitting the modalPanel the other tab is also rerendered! If I wrap the modalPanel itself with <a4j:region renderRegionOnly="true" ..> - nothing is rerendered outside the modal panel after submit (but I need to rerender one field on the tab). This is really embarrassing...

Seems this autoupdate is the same as the "autoupdate" feature of the datascroller, which resulted in unnecessary data fetching from db.

[bitec]

Ok, here is the workaround from extra rerenderings:

...
<rich:tab label="#{bundle.attachments}" >
 <f:setPropertyActionListener target="#{attachmentsBean.shouldBeRerendered}"
 value="true" />

 <a4j:keepAlive beanName="attachmentsBean" />


 <a4j:region rendered="#{attachmensBean.shouldBeRerendered}">
...
</a4j:region>
...

This allows to render the content of the tab only when it was really clicked. KeepAlive allows to save the initiated "shouldBeRerendered" property for the whole postbacks from the tab.

Actually, the best way would be to reset this property on "onTabLeave" event, but anyway this saves some extra loading for me..

[ilya_shaikovsky]

1) a4j:region isn't the only workaround for this from 3.3.0 version. limittolist could be used in more friendly manner. And allows to turn autoupdate off but still update any components with reRender.

2) datascroller has no autoupdate feature - it works so only if you not providing the model but using default table model wrapper for your list . And this works by design. samples at demo shows how to use this correctly.

[bitec]

LimitToList is not convenient when we have the general rich:messages tag or the component, which should be rerendered on each ajax request, also this workaround requires extra information in reRender="..". As for me the tag:

<a4j:jsFunction name="updateContract" reRender="contr">
 ...
 </a4j:jsFunction>

turns into

<a4j:jsFunction name="updateContract" reRender="contr, errorMessages, buttonsBox" limitToList="true"> ...
 </a4j:jsFunction>

Never mind, I will do this, but I really cannot understand why hidden tabs are rerendered on the ajax request to active tab? What was the idea of this, may this is more like a bug and jira should be open for this?

[cdecker]

Is there a reason why we should use <a4j:region/> instead of just cutting out the region from rendering using <c:if/>?