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!

Possible duplicate, the following shows how to solve this for non-dynamic non-cached p:tabview and also for dynamic and non-cached p:tabView: http://stackoverflow.com/questions/20350475/jsf-primefaces-navigate-from-one-tab-to-another/35496734#35496734 — Webel IT Australia - upvoter, Feb 19 '16 at 03:50

Ozan Tabak · Accepted Answer · 2014-02-10T12:37:01.403

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>

thanks for the answer, yes exactly I want to redirect from another page but this parametre "tabIndex=0" is used for JSP, not for JSF. I tried this "/url#tabView:tabA" but either its not working — user3070142, Feb 10 '14 at 12:29
hi, I'm talking about a custom parameter. Ofcourse you can pass your custom parameter and parse it from the url. There's no restriction that you can not use url parameters in JSF. (I edited the response with an example) — Ozan Tabak, Feb 10 '14 at 12:32
Good solution, but doesn't work if we click on browser back button. Or does it? — javadev, Jan 29 '15 at 17:03
no, you need to put extra javascript to handle that. depends on what you mean altough. — Ozan Tabak, Jan 29 '15 at 21:09

score 3 · Answer 2 · answered Aug 29 '16 at 17:43

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.

p:tabView: direct link to tab

2 Answers2