Update primefaces datatable inside tab from another datatable inside other tab - jsf

Question

Hello guys i have a problem updating some components, i am using JSF, Primefaces 5.3, Hibernate.
i Have this tab that contains a datatable: tab 1 and i have this other tab tab 2 what i want to do is when i change Farmaceutica column in tab 2 and click Guardar Cambios i want to update the datatable of the tab 1. I can update the datatabase and when i logout and login again the change is there but i want the change without logout.
This is my admin.xhtml:
<h:form id="frm">
<p:growl id="growl" life="3500" sticky="false" showDetail="true" />
<div class="navbar color-bar"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<p:tabView id="tabs">
<p:tab title="Estado asignaciones">
<p:panel id="panelEstado">
<h:form id="formDta">
<p:dataTable
value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single"
selection="#{estadoAsignaciones.estadoAsignaciones}">
<p:ajax event="rowSelect"
listener="#{estadoAsignaciones.onRowSelect()}"
onstart="PF('blockUIWidget').show()"
oncomplete="PF('overPnl').show()" update="frm" />
<p:column headerText="Auditor">
<h:outputLabel
value="#{data.nombreAuditor} #{data.apellidoAuditor}" />
</p:column>
<p:column headerText="Farmacéutica">
<h:outputLabel value="#{data.farmaceuticaAsignada}" />
</p:column>
<p:column headerText="Progreso">
<p:progressBar value="#{data.porcentaje}"
labelTemplate="{value}%" id="avanceBar" style="width:80%" />
</p:column>
</p:dataTable>
</h:form>
</p:panel>
<p:overlayPanel id="panelOver" widgetVar="overPnl"
showEffect="fade" hideEffect="fade" dismissable="false"
showCloseIcon="true">
<p:panel id="avance" header="Avance auditoria"
class="space robotome">
<p:progressBar id="avanceBar"
value="#{estadoAsignaciones.porcentajeValue}"
style="width:100%" labelTemplate="{value}%" />
</p:panel>
<p:panel id="tiempo" header="Tiempo" class="space robotome">
<h:outputLabel
value="Fecha inicio: #{estadoAsignaciones.fecha}" />
<br />
<h:outputLabel
value="Fecha Actual: #{estadoAsignaciones.fechaActual}" />
<br />
<h:outputLabel
value="Hora inicio: #{estadoAsignaciones.hora}" />
<br />
<h:outputLabel
value="Tiempo transcurrido: #{estadoAsignaciones.calHoraDif} horas" />
</p:panel>
<p:panel id="auditor" header="Auditor" class="robotome">
<p:outputLabel
value="Nombres: #{estadoAsignaciones.getEstadoAsignaciones().nombreAuditor}" />
<br />
<p:outputLabel
value="Apellidos: #{estadoAsignaciones.getEstadoAsignaciones().apellidoAuditor}" />
</p:panel>
</p:overlayPanel>
<p:blockUI block="frm" widgetVar="blockUIWidget">
<p:graphicImage name="imgs/loading.gif" width="50" height="50" />
</p:blockUI>
</p:tab>
<p:tab title="Asignaciones">
<p:dataTable id="dtA"
value="#{asignacionesBean.seleccionAuditores}" var="auditor"
paginator="true" rows="5">
<p:column headerText="Auditor">
<h:outputText value="#{auditor.nombreAuditor}" />
</p:column>
<p:column headerText="Farmaceutica">
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}"
noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems
value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:commandButton value="Guardar cambios" update=":frm"
actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}"
process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()"
onsuccess="PF('blockUIWidgetAsignaciones').show()" />
</p:column>
</p:dataTable>
I appreciate your help.

Answer 1

I could not understant why you are using form inside form. Delete all forms except the main one.
In your first tab, add id to your datatable. and put prependId=false to your panel grid as below.
<p:panel id="panelEstado" prependId="false">
<p:dataTable id="firstTable" value="#{estadoAsignaciones.listaEstadoAsignaciones}"
var="data" paginator="true" rowKey="#{data.idAuditor}"
rows="10" selectionMode="single" selection="#{estadoAsignaciones.estadoAsignaciones}">
Then in Farmaceutica column in tab 2 change code like below
<p:selectOneMenu value="#{auditor.idFarmaceutica}">
<f:selectItem itemLabel="#{data.farmaceutica}" noSelectionOption="true" itemDisabled="true" itemValue="" />
<f:selectItems value="#{asignacionesBean.mapSeleccionFarmaceuticas}" />
<p:ajax event="valueChange" update=":firstTable"/>
</p:selectOneMenu>
in Guardar Cambios change your code to this one.
<p:commandButton value="Guardar cambios" update=":firstTable" actionListener="#{asignacionesBean.guardarRespuestaAsignaciones(auditor)}" process="#this"
onclick="PF('blockUIWidgetAsignaciones').hide()" onsuccess="PF('blockUIWidgetAsignaciones').show()" />