Invoke JavaScript when specific tab is clicked

Question

i am exploring the tab components in primefaces http://www.primefaces.org/showcase/ui/tabviewChangeListener.jsf , and i was wondering if it's possible to invoke a JavaScript when a specific tab is being clicked.

please advise, thanks.

Answer 1

There are two ways to hook up on tab change events:

1. Use onTabChange attribute of <p:tabView> tag to execute a callback function on the appropriate event:

   <p:tabView onTabChange="handleTabChange(index)">
   //tabs
   </p:tabView>
   

2. Use oncomplete attribute of <p:ajax> tag to execute a JS function when AJAX call completes successfully:

           <p:ajax event="tabChange" listener="#{tabBean.onTabChange}" oncomplete="handleOncomplete(xhr, status, args)"/>