How can I make PrimeFaces tabs "linkable"? - jsf

Question

I would like to be able to link to individual tabs in a PrimeFaces' "tabView". In other words, if my page "test.jsf" has a tabView with a tab entitled "Example", I want to be able to click a link to "Test.jsf#Example" and have the "Example" tab loaded automatically. How can I do this?

Answer 1

This can be done with a wee bit of JavaScript (using jQuery). I hope I have commented the following code well-enough that it can be understood.
<script type="text/javascript">
// What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
// load the tab (by "clicking" on the link) that has the same text value as the fragment.
// Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
// This allows individual tabs to be linked to, and puts what tab you were on in the history.
navigateToTab = function () {
if (window.location.hash) {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
if (jQuery(el).text() === window.location.hash.replace('#', '')) {
jQuery(el).click();
return;
}
})
}
};
jQuery().ready(navigateToTab);
jQuery(window).bind('hashchange', navigateToTab);
// This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
// E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
// to be "#Example"
setupTabFragmentLinks = function () {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
el.onclick = function() {window.location = '#' + jQuery(el).text()};
})
};
jQuery().ready(setupTabFragmentLinks);
</script>
All you have to do is insert that JavaScript in the page that has the tabs. Then you can get a link to a tab with the usual <a href='test.jsf#Example>Click here!</a>. An added bonus is that the tab you were on becomes part of the browser history; i.e., if you navigate away from the page that has the tabs, then press the "back" button, you are brought back to the tab you were on.
Note: if the tabView changes (e.g. you add or remove tabs), you will need to call setupTabFragmentLinks again.

Answer 2

Primefaces provides a javascript API for the <p:tabView/>(and many other components). You can call the select(index) method on the client side widgetVar name of your <p:tabView/>. For example, on a tab view
<p:tabView id="thePanel" widgetVar="tabPanel"/>
From a <p:CommandButton/>, you can call tabPanel.select(1) in the onclick attribute to select the first tab and so forth
<p:commandButton update=":thePanel" value="Do It " id="doIt" onclick="tabPanel.select(1)"/>