0

I'm using Primefaces with Mojarra and have noticed that the trees under each dynamic p:tab get the same id

<p:tabView id="customerData" value="#{documentTabView.documentTabs}" var="tab" dynamic="true">  
   <p:tab title="#{tab.title}" closable="#{tab.closable}" >
      <p:panel>
         <h:outputText value="test_#{tab.title}"/>
      </p:panel>
  </p:tab>
</p:tabView>

Resulting HTML is as follows:

<div id="customerData" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-tabs-top">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true"><a href="#customerData:0:j_idt21">all documents</a></li>
      <li class="ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a href="#customerData:1:j_idt21">other documents</a><span class="ui-icon ui-icon-close"></span></li>
   </ul>
   <div class="ui-tabs-panels">
      <div id="customerData:0:j_idt21" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
         <div id="customerData:0:j_idt46" class="ui-panel ui-widget ui-widget-content ui-corner-all">
            <div id="customerData:0:j_idt46_content" class="ui-panel-content ui-widget-content">test_all documents</div>
         </div>
         <script id="customerData:0:j_idt46_s" type="text/javascript">PrimeFaces.cw('Panel','widget_customerData_0_j_idt46',{id:'customerData:0:j_idt46'});</script>
      </div>
      <div id="customerData:1:j_idt21" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden" role="tabpanel" aria-hidden="true"></div>
   </div>
   <input type="hidden" id="customerData_activeIndex" name="customerData_activeIndex" value="0" autocomplete="off" />
</div>

Can you please explain why same id (here j_idt21) is being used twice. I know that it is prefixed by the tab index but I would like to know if it exists a solution to force having another (and different) ids.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Eric
  • 11
  • 1
  • For everyone who downvotes questions (or answers), please provide reasons. – Aritz Aug 16 '13 at 11:37
  • @Xtreme: it's perhaps because the HTML in the original question was completely escaped with `<` and all, which made fixing the poor formatting very hard. That would possibly have made an editor with helpful intents completely mad. The question is at its own okay enough to answer. – BalusC Aug 16 '13 at 12:12

1 Answers1

3

Because there's only one <p:tab> component which generates the very same piece of HTML multiple times depending on the current iteration round of <p:tabView value>.

If you're bothered about the autogenerated ID, just give <p:tab> a fixed ID.

<p:tab id="tab" ...>

If you worry about distinguishing tabs by a fixed ID in e.g. JavaScript, then just put its content in a plain HTML <div> whose id is generated based on the currently iterated item. E.g.

<p:tab ...>
    <div id="#{tab.name}">
        ...
    </div>
</p:tab>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thank you for the answer but based on my tests, defining id using a EL is not accepted because it raises a null pointer exception. I understood from different readings that 'id' tag was initialized before EL was evaluated. By consequence, I have the feeling, you cannot have different ids for each tab in the case I described. – Eric Aug 19 '13 at 09:53
  • Rereading your response, I noticed that you refer to "plain HTML" tags, perhaps this is a major difference and in this case, it may work as you wrote. I will try. Thank you. – Eric Aug 19 '13 at 09:59
  • `id` (and `binding`) attribute is evaluated during view build time, however `` value runs during view render time. See also http://stackoverflow.com/questions/3342984/jstl-in-jsf2-facelets-makes-sense – BalusC Aug 19 '13 at 10:37