JSF / PrimeFaces: Navigate from one tab to another

Question

Using Primefaces tab view (<p:tabView>), how to navigate from one tab to another tab?

For example:

<p:tabView id="tabPanel">
  <p:tab id="tab1">
       <p>Tab 1</p>
       <a href="#">Go to tab2</a2>
  </p:tab>
   <p:tab id="tab2">
       <p>Tab 2</p>
  </p:tab>   
</p:tabView>

Answer 1

You can use client side scripting api of PrimeFaces. Define a widgetVar attribute in tabView. Then use select(index) client side api.

<p:tabView id="tabPanel" widgetVar="tabPanelWidget">
  <p:tab id="tab1">
       <p>Tab 1</p>
       <a href="#" onclick="changeTab(1);">Go to Tab2</a2>
  </p:tab>
   <p:tab id="tab2">
       <p>Tab 2</p>
  </p:tab>   
</p:tabView>

Be carefull about the parameter to JS function. the index of tab , which is zero based, is passed to Javascript.

here is client side code

function changeTab(index)
{
    tabPanelWidget.select(index);
}

tabView with Dynamic Content

Furthermore, if you have dynamic content you can simulate the client side api as user click the tab.

I go deep into source code of the component. A tabview component consist of a div and unordered list items which include a <a> tags to click. Then i select that <a> tags from the page and clicked with jquery.

See my jquery code:

function changeTab(tabId)
    {
       $('#formId\\:tabPanel ul li a[href="#form:tabPanel:"+tabId+"]').click();
}

Here is the details of selectors.

#formId\:tabPanel : formId is the id of the page. If prependId="false" is used this part can be skipped. \\ is escape for : and tabPanel is the id of the tabview.

ul li : is unordered list items which represents tabs.

a[href="#form:tabPanel:"+tabId+"]' : <a> tag whose href attribure is equals to tabId.

Furthermore, i inspect the source code from PrimeFaces showcase. It may be have some differences in your codes.

Answer 2

You can use the activeIndex attribute of p:tabView. You have to store it in a variable and then modify it using an action.

<p:tabView id="tabPanel" activeIndex="#{myBean.activeIndex}">
    <p:tab id="tab1">
        ...
        <p:commandLink action="#{myBean.goToTab(2)}">Go to Tab2</p>
    </p>
    <p:tab id="tab2">
        ...
    </p:tab>
</p:tabView>

MyBean:

 public class MyBean {
     private int activeIndex;
     public void goToTab(int index) {
         this.activeIndex = index;
     }
 } 

Answer 3

You can change your TAB of Your tabview having this :

    <p:tabView id="tabProyecto"  widgetVar="tabPanelWidget" cache="false">
....

In any buttom you can call the jquery function "changeTabs"

    <script type="text/javascript">
            $(document).ready(function () {


            });

            var changeTabs= function (index) {
                 PF("tabPanelWidget").select(index);
            };
            ...
</script>

Answer 4

There are typos in the answer by @erecan above, the form for dynamic tabs should be:

function changeTabDynamic(tabId)
{
   $('#formId\\:tabPanel ul li a[href="#formId:tabPanel:'+tabId+'"]').click();
}

Provided as answer not comment for clear formatting

Answer 5

Important:

Maybe you have to add $(document).ready(function(), because the JavaScript runs before the page load.

function changeTabDynamic(tabId) {
    $(document).ready(function() {$('#tabViewId ul li a[href=\"#tabViewId\\: + tabId + \"]').click()})");
}

Answer 6

In fact you need to put:

function changeTab(index) {
    tabPanelWidget.selectTab(index);
}

and not:

tabPanelWidget.select(index);