Update primefaces datatable inside tab from another datatable inside other tab

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.

First of all you form inside another form is not allowed so rectify that issue next if i am getting it right then you want to update the First tab while going to second tab is that right? — techipank, Apr 29 '16 at 04:16

score 0 · Answer 1 · edited Apr 29 '16 at 13:53

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()" />

Using `prependId=false` is a bad suggestion. See http://stackoverflow.com/questions/7415230/uiform-with-prependid-false-breaks-fajax-render — Kukeltje, Apr 29 '16 at 13:52

Update primefaces datatable inside tab from another datatable inside other tab

1 Answers1