如何仅更新 p:tabView/p:accordion 或类似组件中的选项卡标题? [英] How to update only tab title in p:tabView /p:accordion or similar component?

问题描述

如果某些特定内容显示在使用 ajax update 的选项卡上(只是标题，没有其他内容)，我正在尝试将某些选项卡的标题加下划线.目前它只有在我刷新页面或整个组件时才有效(但由于从数据库加载了许多数据，所以这是个坏主意).

有可能吗?我尝试使用 jQuery(通过 href 获取元素)和 bean(RequestConext.getCurrentInstance().update())在客户端获取和更新此组件，但未成功.

生成的html(不包括样式):

<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">基本信息</a><li role="tab" aria-expanded="false"><a href="#m_tabview:documentsTab"><u>文档</u></a><li role="tab" aria-expanded="false"><a href="#m_tabview:j_idt191">社交数据</a><li role="tab" aria-expanded="false"><a href="#m_tabview:contactsTab">联系人</a>...

并且有两个标签具有可变标题:文档(已加下划线)和联系人.

XHTML 代码如下:

<p:tab title="基本信息"><h:form id="base_form"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab><p:tab id="documentsTab" name="documentsTab" title="#{clientform.documentsHeaderInline}"><h:form id="documents_form"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab><p:tab title="社交数据"><h:form id="social_data_form"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab><p:tab id="contactsTab" title="#{clientform.contactsHeaderInline}"><h:form id="сontacts_form"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab></p:tabView>

当用户按下保存"按钮时，支持的 bean clientform 在必要时更改标题，然后我需要动态更新它们，但我不知道如何.

Primefaces 版本为 4.0.6，遗憾的是目前无法更新.

解决方案

您无法更新单个选项卡，因为它们在 PrimeFaces 中没有渲染器.您可以尝试将标题移动到 f:facet name="title"...，放置一个 h:outputText id="tabIdTitle"...并在需要时更新该 outputText.自 PF 3.2 起支持此功能.所以像

<p:tab title="基本信息"><h:form id="base_form"><!-- 一些带有提交按钮的表单数据--></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"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab><p:tab title="社交数据"><h:form id="social_data_form"><!-- 一些带有提交按钮的表单数据--></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"><!-- 一些带有提交按钮的表单数据--></h:form></p:tab></p:tabView>

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.

解决方案

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>

这篇关于如何仅更新 p:tabView/p:accordion 或类似组件中的选项卡标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！