CODEWITHSUNDEEP
javajsftabsprimefaces
Mr.J4mes
Mr.J4mes

Reputation: 9266

PrimeFaces 3.0: How to change tab focus with `<p:tabView>`

In my app, when a user clicks on some item, I use <p:tabView> inside <p:dialog> to show the details of that item. Based on the item type, some will have extra tabs. It is similar to the following:

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" update="itemDetails" oncomplete="eventDialog.show();" />
   ...
</p:schedule>

<p:dialog id="detailsDlg" onHide="detailsTab.select(0);">
   <p:tabView effect="fade" widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

Consider the situation when I click a Book and navigate to the Author tab to view the Author's details. Now, if I close the dialog without switching back to the General details tab and I click some items other than Book (which means they don't have Author tab), my dialog appeared to be still on the invisible Author tab. Even if I try to click on the General tab, it will not render anymore.

UPDATE:

I tried to use the client-side API of <p:tabView> and <p:dialog> and make a call to detailsTab.select(0) in the onHide attribute of <p:dialog>. The situation is a bit better. However, the 1st item, which is not a Book, that I click after I click a Book will experience the same situation as above. From the 2nd item onward, everything is OK again. Are there any ways to make it work right away?

I'd be very grateful if you could show me how I can solve this problem.

Upvotes: 1

Views: 9472

Answers (1)

Mr.J4mes
Mr.J4mes

Reputation: 9266

I finally found the solution. In the <p:tabView> tag, I tried to have some effect by setting effect="fade". I think the effect might have caused some lag in code execution and thus, I couldn't see the result of the tab switching until the next request.

After I turned off the effect and put detailsTab.select(0); in the oncomplete attribute of my <p:ajax> event, it's working now.

<p:dataTable value="#{mrBean.items}" var="item" >
   <p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" 
           update="itemDetails" oncomplete="eventDialog.show();detailsTab.select(0);" />
   ...
</p:schedule>

<p:dialog>
   <p:tabView widgetVar="detailsTab" id="itemDetails">
      <tab title="General details">
         ...
      </tab>

      <tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
         ...
      </tab>
   </p:tabView>
</p:dialog>

One thing to note is that when I turned off the effect without putting detailsTab.select(0); in the oncomplete attribute of my <p:ajax> event, this problem still occurred. In other words, the dialog still ended up showing the invisible tab. However, when I clicked on the General tab, the content of this tab was rendered perfectly. The problem obviously happened only when I was using effect. This may be a bug of <p:tabView>.

I think my solution is not very elegant because I had to turn off the effect :P. If you could provide any solutions which can works with effect, I'd be very happy to accept your answer :).

Upvotes: 5

Related Questions