How to update a form that contains pivot tables with timer? - jsf

Question

I am using a bootstrap carousel to pass the tables (these are generated from the db), I tried to use the prime-faces poll but it only recharges me once and after that the first table remains static and loses transition effect . Any recommendation...
psdta: Primefaces 4.0, and bootstrap 4 are part of the design.
<h:form id="tablas">
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" resizable="false" draggable="false" closable="false"
showHeader="false" style="border: none; opacity: 0.75;">
<p:graphicImage id="refreshTable" value="./../resources/images/cargandoLogin.gif" style="width: 100px; height: 100px; " />
</p:dialog>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="limiter">
<div class="container-table100">
<h:outputText value="#{beansSeguimientoRelease.dateTable}" escape="false"/>
<div class="carousel-item" data-interval="#{beansSeguimientoRelease.contTabla}">
<div id="main-container">
<div class="tituloN">NOTAS</div>
<table class="table table-bordered" style="text-orientation: upright;">
<thead>
<tr>
<th scope="col" style="background-color: #0f7ff4">TEMAS PENDIENTES</th>
<th scope="col" style="background-color: #0f7ff4">NOTAS</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; border-left: 15px black !important;">
<h:outputText value="#{beansSeguimientoRelease.itemNotas.tareas}" escape="false"/> </td>
<td style="text-align: left;">
<h:outputText value="#{beansSeguimientoRelease.itemNotas.notas}" escape="false"/></td>
</tr>
<tr>
<td style="text-align: right;">Disponibilidad:</td>
<td><h:outputText value= "#{beansSeguimientoRelease.itemNotas.disponibilidad}" escape="false"/></td>
</tr>
<tr>
<td style="text-align: right;">Operador Noc:</td>
<td><h:outputText value="#{beansSeguimientoRelease.itemNotas.operador_noc}" escape="false"/> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<a id="aPrev" class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev" style="width: 5%">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="aNext" class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next" style="width: 5%">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<p:poll id="Tpoll" interval="#{beansSeguimientoRelease.cont}" update="tablas"/>
</h:form>

Answer 1

I assume that problem is caused by fact that p:poll is inside h:form and that, by updating entire form, it updates itself too and stops working (maybe you can see something in JS debug console).
Try to wrap up carousel div into h:panelGroup like this
<h:panelGroup id="wrapper" layout="block">
<div id="carouselExampleInterval" class="carousel slide"...>
...
</div>
</h:panelGroup>
and then, when poll interval expires, update only newly added h:panelGroup
<p:poll id="Tpoll" interval="#{beansSeguimientoRelease.cont}" update=":tablas:wrapper"/>