无法更新p：tab内容

Question

I'm trying to update the content of a selected tab, but no methods seem to work.

This sort of what I have:

<h:form id="tabsForm">

    <p:tabView id="tabs"
               dynamic="true"
               cache="false"
               value="#{mainPage.versions}"
               var="version"
               scrollable="true">

        <p:ajax event="tabChange" listener="#{mainPage.onTabChange}" />
        <p:ajax event="tabClose" listener="#{mainPage.onTabClose}" />

        <p:tab id="version" title="#{version.value}" closable="true">

          <p:poll interval="5" update=":tabsForm:tabs" oncomplete="doSomething()"/>

          CONTENT GOES HERE (ALSO NEEDS TO BE UPDATED)

        </p:tab>

    </p:tabView>

</h:form>

The Line:

<p:poll interval="60" update=":tabsForm:tabs" oncomplete="doSomething()"/>

Supposed to update the content inside each tab every 60 seconds, The problem is, it will always select the first tab after the update.

I tried to update a tab separately, this way:

<p:poll interval="60" update=":tabsForm:tabs:version" oncomplete="doSomething()"/>

But I get an exception:

Can not update component "org.primefaces.component.tabview.Tab" with id "tabsForm:tabs:0:version" without a attached renderer. Expression ":tabsForm:tabs:version" referenced from "tabsForm:tabs:0:j_idt14"

I also tried a lot of other methods from questions I found here on SO, but nothing is working. It either updates and selects the first tab for me or doesn't update at all.

Answer 1

I don't think you want to put the tag inside the dynamic tabView. That will create a poll for each individual tab. Instead you want to use one poll tag to update the tab. If you are OK with updating all tabs and keeping focus on the current tab then just..

<h:form id="tabsForm">

    <p:tabView id="tabs"
           cache="false"
           value="#{mainPage.versions}"
           var="version"
           scrollable="true">

      <p:ajax event="tabChange" listener="#{mainPage.onTabChange}" />
      <p:ajax event="tabClose" listener="#{mainPage.onTabClose}" />

      <p:tab id="version" title="#{version.value}" closable="true">

        CONTENT GOES HERE (ALSO NEEDS TO BE UPDATED)

      </p:tab>

    </p:tabView>
    <p:poll interval="60" listener="#{mainPage.updateComponent('tabsForm:tabs:version')}" oncomplete="doSomething();"/>

</h:form>

in javascript

//if this is needed ***
function doSomething() { 
    $("#tabsForm\\:tabs ul li.ui-tabs-selected).click();
}

and in mainPage:

public void updateComponent(String compId){
     RequestContext.getCurrentInstance().update(compId);
}

I removed the "dynamic=true" (seems to cause more problems). Get rid of the error message by updating the component from the backing bean through a listener.

Updating individual tabs is more difficult and prone to strange behavior. You can try, but it seems to only work if the tabIndex is not 0. You would capture the tabIndex onTabChange event with

public void onTabChange(TabChangeEvent event) {
    tabIndex = ((TabView) event.getSource()).getIndex();
}
//getter setter tabIndex

Your poll tag would be something like

<p:poll interval="60" listener="#{mainPage.updateComponent('tabsForm:tabs:' += mainPage.tabIndex += ':version')}" oncomplete="doSomething();"/>

apparently += is only for EL 3.0, you could use .concat instead. My PF version is 6.0