How to update only tab title in p:tabView /p:accordion or similar component?

Question

I am trying to make the title of some tabs underlined if some specific content is shown on that tabs using ajax update (just titles, nothing else). Currently it works only if I refresh the page or the whole component (but it is bad idea because of many data loading from the database).

It is possible? I tried to get and update this component on the client side with jQuery (getting element by href) and from the bean (RequestConext.getCurrentInstance().update()), but unsuccessfully.

The generated html (styles are excluded):

<div id="m_tabview" style="display: block;" data-widget="m_tabviewWv">
  <ul role="tablist">
    <li role="tab" aria-expanded="true">
        <a href="#m_tabview:j_idt25">Basic information</a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:documentsTab">
            <u>Documents</u>
        </a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:j_idt191">Social data</a>
    </li>
    <li role="tab" aria-expanded="false">
        <a href="#m_tabview:contactsTab">
            Contacts
        </a>
    </li>
    ...
  </ul>
</div>

And there are two tabs have mutable titles: Documents (already underlined) and Contacts.

The XHTML code is like below:

<p:tabView id="m_tabview" widgetVar="m_tabviewWv" scrollable="false">
  <p:tab title="Basic information">
    <h:form id="base_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="documentsTab" name="documentsTab" title="#{clientform.documentsHeaderInline}">
    <h:form id="documents_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab title="Social data">
    <h:form id="social_data_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="contactsTab" title="#{clientform.contactsHeaderInline}">
    <h:form id="сontacts_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
</p:tabView>

When user press the "Save" button, backed bean clientform change titles if necessary and then I need to update them dynamically, but I don't know how.

Primefaces version is 4.0.6 and unfortunately cannot be updated at the moment.

Answer 1

You cannot update individual tabs since they do not have renderers in PrimeFaces. What you can try is to move the title to a f:facet name="title"..., put an h:outputText id="tabIdTitle"... and update that outputText when required. This is supported since PF 3.2. So something like

<p:tabView id="m_tabview" widgetVar="m_tabviewWv" scrollable="false">
  <p:tab title="Basic information">
    <h:form id="base_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="documentsTab" name="documentsTab">
    <f:facet name="title">
       <h:outputText id="documentsTabTitle" value="#{clientform.documentsHeaderInline}" />
    </f:facet>
    <h:form id="documents_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab title="Social data">
    <h:form id="social_data_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
  <p:tab id="contactsTab">
    <f:facet name="title">
      <h:outputText id="contactsTabTitle" value="#{clientform.contactsHeaderInline} "/>
    </f:facet>
    <h:form id="сontacts_form">
      <!-- Some form data with submit button -->
    </h:form>
  </p:tab>
</p:tabView>

Answer 2

Thanks to Kukeltje and Geinmachi!

The right way is really to use a facet (but with CSS style separately because if you use CSS inline, the tags will be shown as is and text won't be underlined):

<p:tab id="documentsTab" name="documentsTab">
  <f:facet name="title">
    <h:outputText id="documentsTabTitle" value="Documents" style="#{clientform.documentsHeaderInline}"/>
  </f:facet>
...
</p:tab>

and (in managed bean if necessary):

documentsHeaderInline = "text-decoration: underline;";