Edgardo Rodriguez Edgardo Rodriguez - 8 days ago 7
HTML Question

render a PannelGroup on JSF tiggered by click on p:tab

Currently I have a developed frontend with JSF which loads too much data and this is not in all cases needed by the user, this mentioned data is divided by Tab "" that is rendered based on one condition:

<p:tab id="summary-tab2" title="Tittle of tab"
rendered="#{(myBean.SomeCondition)}">
<ui:insert name="summary-tab-characteristics">
<h:panelGroup id="panelData">
<ot:otherJSF id="otherHtml" application="#someBean}"/>
</h:panelGroup>
</ui:insert>
</p:tab>


In many cases the user doesn’t need to see the information inside that tab, so I need the PanelGroup "PanelData" to "render" if, and only if the user clicks the "Summary-tab2" tab.

How could I do this?

Answer

If you are using TabView component of PrimeFaces, you just can simply set the dynamic attribute to true.

Dynamic Tabs

There’re two toggleModes in tabview, non-dynamic (default) and dynamic. By default, all tab contents are rendered to the client, on the other hand in dynamic mode, only the active tab contents are rendered and when an inactive tab header is selected, content is loaded with ajax. Dynamic mode is handy in reducing page size, since inactive tabs are lazy loaded, pages will load faster. To enable dynamic loading, simply set dynamic option to true.

<p:tabView dynamic="true">
//tabs
</p:tabView>

And with panel:

    <p:panel collapsed="true" header="title" toggleable="true">

        <f:ajax event="toggle" listener="#{bean.makeTheConditionTrue()}"render="@this" />

        <ui:fragment rendered="#{bean.condition}">

            //your content

        </ui:fragment>

    </p:panel>

But with this way, content will be updated on every toggle event. I'm not sure you want something like that.