jsf - Why do I get the same ID suffix for p:tab children? -
i'm using primefaces mojarra , have noticed trees under each dynamic p:tab 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 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 please explain why same id (here j_idt21
) being used twice. know prefixed tab index know if exists solution force having (and different) ids.
because there's only one <p:tab>
component generates same piece of html multiple times depending on current iteration round of <p:tabview value>
.
if you're bothered autogenerated id, give <p:tab>
fixed id.
<p:tab id="tab" ...>
if worry distinguishing tabs fixed id in e.g. javascript, put content in plain html <div>
id
generated based on iterated item. e.g.
<p:tab ...> <div id="#{tab.name}"> ... </div> </p:tab>
Comments
Post a Comment