p:tabView: direct link to tab

Question

I want to have a link that will open the specific tab of the p:tabView. I tried this link but

it's not working (first tab is open): /jsf/.....#tabView:tabA

this is my TabView :

  <p:tabView id="tabView">        
            <p:tab id="tabb" title="B">
            </p:tab>    
        <p:tab id="tabA" title="A">
        </p:tab>            
 </p:tabView>

Any help will be greatly appreciated!

Answer 1

You can use a javascript call to the widget as stated in the PrimeFaces documentation. Give a widget name to the tabView and change the tab with .select(tabIndex)

If you are redirecting from another page, you can pass a request parameter (eg. ../url?tabIndex=0) to decide wich tab will be activated , get the variable from the url parameter and activate that tab again using the client api (javascript call).

<p:tabView id="tabView" widgetVar="myTabExample">        
          </p:tab>
        <p:tab id="tabb" title="B">
         </p:tab>   
        <p:tab id="tabA" title="A">
        </p:tab>            
 </p:tabView>

<script>
   myTabExample.select(0);
</script>

I also added an example with get parameter

 <p:tabView id="tabView" widgetVar="myTabExample">        
              </p:tab>
            <p:tab id="tabb" title="B">
             </p:tab>   
            <p:tab id="tabA" title="A">
            </p:tab>            
     </p:tabView>

    <script>
    //function to parse get parameters from url
    //taken from http://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
    function get(name){
        if (name=(new RegExp('[?&]'+encodeURIComponent(name)+'= ([^&]*)')).exec(location.search))
        return decodeURIComponent(name[1]);
     }

    myTabExample.select(get("tabIndex"));
</script>

Answer 2

Here is an alternative solution which doesn't need js and supports browser back navigation:

<p:tabView cache="true" activeIndex="#{param.id}">
   <p:tab title="First Tab">
      // Content
   </p:tab>
   <p:tab title="Second Tab">
      // More Content
   </p:tab>
</p:tabView>

Load the page with the first tab open with:

/mypage.xhtml?id=0

Load the page with the second tab open with:

/mypage.xhtml?id=1

The drawback however is that you can only use integers, using the tab id's to adress the tabs is not possible.