0

Estoy desarrollando una aplicación con las siguientes tecnologías:

  • tomcat 8
  • java 8
  • primefaces 5.2.11

Tengo problemas para ocultar ciertos controles dependiendo del valor seleccionado de un SelectOneMenu dentro de un dialogo modal. La documentación de Primefaces muestra un ejemplo muy claro y sencillo sobre como actualizar la página en base al valor seleccionado del desplegable (aunque el contexto del ejemplo no se realiza dentro de un diálogo): http://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml.

Mi código es el siguiente:

<p:dialog
        header="Abrir Incidencia"
        id="dlgAbririncidenciaEstados"
        closable="false" closeOnEscape="false"
        width="1060" modal="true"
        widgetVar="dlgAbririncidenciaEstados">
    <h:outputText value="Tipo de incidencia"/>
    <p:selectOneMenu id="selIncidenciaTipoEstados"
        value="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId}">
        <f:selectItems
            value="#{monitorizadorCentroControlador.abrirIncidenciaBean.listaIncidenciaTipos}"
            var="incidenciaTipo"
            itemLabel="#{incidenciaTipo.nombre}" itemValue="#{incidenciaTipo.id}"/>
                <p:ajax update="txtOperarioAfectado comboOperarioAfectado"
                        listener="#{monitorizadorCentroControlador.abrirIncidenciaBean.alCambiarTipoIncidencia}"/>
    </p:selectOneMenu>
    <p:outputLabel
        id="txtOperarioAfectado"
        rendered="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId == 8}"
        value="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId}"/>
    <p:autoComplete
        id="comboOperarioAfectado"
        completeMethod="#{monitorizadorCentroControlador.abrirIncidenciaBean.autocompletarOperario}"
        rendered="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId == 8}"
        forceSelection="true"
        value="#{monitorizadorCentroControlador.abrirIncidenciaBean.operarioAfectadoSeleccionadoCodigo}"
        var="codigo" itemLabel="#{codigo}" itemValue="#{codigo}">
        <p:ajax event="itemSelect"
            listener="#{monitorizadorCentroControlador.abrirIncidenciaBean.alCambiarOperario}"
            update="dlgAbririncidenciaEstados"/>
            <p:column>
                <h:outputText value="#{codigo}"/>
            </p:column>
    </p:autoComplete>
</p:dialog>

Por otra parte, el evento de ajax:

public void alCambiarTipoIncidencia(AjaxBehaviorEvent evt) {
    RequestContext.getCurrentInstance().update("dlgAbririncidenciaEstados");
}

Mi intención es que Primefaces renderice los controles txtOperarioAfectado y comboOperarioAfectado en base al valor seleccionado de selIncidenciaTipoEstados. Para probar su funcionamiento, al campo txtOperarioAfectado le he asignado el valor de incidenciaTipoSeleccionadoId. Con el anterior fragmento de código dicho valor no se actualiza. Sin embargo, si elimino el atributo rendered del control txtOperarioAfectado el valor si que se actualiza lo cual me lleva a pensar que, al menos en la parte de servidor, cuando el valor de incidenciaTipoSeleccionadoId es distinto a 8 no renderiza el control. Sin embargo en el cliente no lo oculta. Así que mi pregunta es ¿Como puedo ocultar los controles txtOperarioAfectado y comboOperarioAfectado cuando no se cumple la condición monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId == 8?

1 respuesta 1

0

Al final he encontrado la respuesta en este post. Tal como comenta @LuiggiMendoza:

Lo que viene a decir BalusC es que no se puede re-renderizar un componente que no ha sido renderizado cuando se creó la vista rendered=false. "Para ello, hay que buscar la actualización del componente que contiene a los controles que queremos ocultar" no es cualquier componente, debes asegurarte que el componente que los contiene, de lado de Java, extienda de NamingContainer como h:panelGroup, <h:dataTable> o sus símiles en otros frameworks.

En mi caso, estaba intentando actualizar el dialogo directamente:

<p:ajax update="dlgAbririncidenciaEstados"
       listener="#{monitorizadorCentroControlador.abrirIncidenciaBean.alCambiarTipoIncidencia}"/>

En tal caso, la solución a mi problema es fácil, Simplemente hay que introducir un nuevo componente ('panelPrincipal') que es el que va a contener a los controles txtOperarioAfectado y comboOperarioAfectado. Finalmente así queda la solución:

<p:dialog
        header="Abrir Incidencia"
        id="dlgAbririncidenciaEstados"
        closable="false" closeOnEscape="false"
        width="1060" modal="true"
        widgetVar="dlgAbririncidenciaEstados">
    <p:panelGrid id="panelPrincipal" style="border: 0;height:280px;" columns="2" rendered="true">
        <h:outputText value="Tipo de incidencia"/>
        <p:selectOneMenu id="selIncidenciaTipoEstados"
            value="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId}">
            <f:selectItems
                value="#{monitorizadorCentroControlador.abrirIncidenciaBean.listaIncidenciaTipos}"
                var="incidenciaTipo"
                itemLabel="#{incidenciaTipo.nombre}" itemValue="#{incidenciaTipo.id}"/>
                    <p:ajax update="panelPrincipal"
                            listener="#{monitorizadorCentroControlador.abrirIncidenciaBean.alCambiarTipoIncidencia}"/>
        </p:selectOneMenu>
        <p:outputLabel
            id="txtOperarioAfectado"
            rendered="#{monitorizadorCentroControlador.abrirIncidenciaBean.mostrarComboOperarioAfectado}"
            value="#{monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId}"/>
        <p:autoComplete
            id="comboOperarioAfectado"
            completeMethod="#{monitorizadorCentroControlador.abrirIncidenciaBean.autocompletarOperario}"
            rendered="#{monitorizadorCentroControlador.abrirIncidenciaBean.mostrarComboOperarioAfectado}"
            forceSelection="true"
            value="#{monitorizadorCentroControlador.abrirIncidenciaBean.operarioAfectadoSeleccionadoCodigo}"
            var="codigo" itemLabel="#{codigo}" itemValue="#{codigo}">
            <p:ajax event="itemSelect"
                listener="#{monitorizadorCentroControlador.abrirIncidenciaBean.alCambiarOperario}"
                update="dlgAbririncidenciaEstados"/>
                <p:column>
                    <h:outputText value="#{codigo}"/>
                </p:column>
        </p:autoComplete>
    </p:panelGrid>
</p:dialog>
2
  • 1
    "Básicamente lo que viene a decir es que no es posible actualizar a través de ajax un componente cuya renderización está condicionada" incorrecto. Lo que dice BalusC es que no se puede re-renderizar un componente que no ha sido renderizado cuando se creó la vista rendered=false. "Para ello, hay que buscar la actualización del componente que contiene a los controles que queremos ocultar" no es cualquier componente, debes asegurarte que el componente que los contiene, de lado de Java, extienda de NamingContainer como <h:panelGroup>, <h:dataTable> o sus símiles en otros frameworks.
    – user227
    Commented el 11 nov. 2016 a las 15:09
  • Gracias @LuiggiMendoza. Cierto, corrijo el post.
    – hecnabae
    Commented el 14 nov. 2016 a las 7:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.