p:tabView: direct link to tab

jsf-2, primefaces, tabview

Solution

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>

Problem

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!

Original source

Related problems