CODEWITHSUNDEEP
javajsfjsf-2primefaces
user1285928
user1285928

Reputation: 1476

How to use p:tabMenu with Ajax

I have a p:tabMenu which is used to display tabs. 

<p:tabMenu id="tabs" activeIndex="0" >  
    <p:menuitem value="tab1" url="/tab1.jsf" />
    <p:menuitem value="tab2" url="/tab2.jsf" />
</p:tabMenu>

In order to make the loading of the tabs more smooth (I don't want to see the tab blinking) can I somehow use Ajax?

Upvotes: 1

Views: 3713

Answers (2)

kolossus
kolossus

Reputation: 20691

Set dynamic="true" on your <p:tabMenu/>, automatically triggers an ajax request. Very visible on the primefaces demo site. Also see the primefaces demo.

EDIT: Considering your question more carefully, if it's smoothness in visuals you're looking for, you should set your tab effect parameter to any of the primefaces effects. My personal favourite is the effect="slide"

Upvotes: 2

Akos K
Akos K

Reputation: 7133

Caching (cache=true) the tab contents will make the loading more smooth. Caching is enabled by default. In addition if you want to make an ajax call on every tab change use the tabChange event:

<p:tabMenu id="tabs" activeIndex="0" dynamic="true">

    <p:ajax event="tabChange" listener="#{tabBean.onTabChange}"/>

    <p:menuitem value="tab1" url="/tab1.jsf" />
    <p:menuitem value="tab2" url="/tab2.jsf" />
</p:tabMenu>

For detailed example see the TabView - Change Listener demo.

Upvotes: 3

Related Questions