Home / Questions / 33125
Accepted
hecnabae
Asked: 2020-11-12 01:31:07 +0800 CST 2020-11-12 01:31:07 +0800 CST

Hide control based on the selected value of a p:selectOneMenu in a modal dialog

  • 772

I am developing an application with the following technologies:

  • tom cat 8
  • java 8
  • primefaces 5.2.11

I'm having trouble hiding certain controls depending on the selected value of a SelectOneMenu within a modal dialog. The Primefaces documentation shows a very clear and simple example on how to update the page based on the selected value of the dropdown (although the context of the example is not done within a dialog): http://www.primefaces.org/showcase/ ui/ajax/dropdown.xhtml .

My code is the following:

<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>

On the other hand, the ajax event:

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

My intention is for Primefaces to render the controls txtOperarioAfectadoand comboOperarioAfectadobased on the selected value of selIncidenciaTipoEstados. To test its operation, txtOperarioAfectadoI have assigned the value of incidenciaTipoSeleccionadoId. With the above code snippet that value is not updated. However, if I remove the rendered attribute of the control txtOperarioAfectado, the value is updated, which leads me to think that, at least on the server side, when the value of incidenciaTipoSeleccionadoIdis different from 8, the control is not rendered. However in the client it does not hide it. So my question is how can I hide the controls txtOperarioAfectadoand comboOperarioAfectadowhen the condition is not met monitorizadorCentroControlador.abrirIncidenciaBean.incidenciaTipoSeleccionadoId == 8?

java

1 Answers

  1. Best Answer

    I finally found the answer in this post . As @LuiggiMendoza comments:

    What BalusC is saying is that you cannot re-render a component that was not rendered when the view was created rendered=false. "To do this, we must look for the update of the component that contains the controls that we want to hide" is not just any component, you must make sure that the component that contains them, on the Java side, extends NamingContainer as h:panelGroup, <h:dataTable>or its similes in other frameworks .

    In my case, I was trying to update the dialog directly:

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

    In this case, the solution to my problem is easy, you just have to introduce a new component ('panelMain') which is the one that will contain the controls txtOperarioAfectadoand comboOperarioAfectado. Finally, this is the solution:

    <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>
    • 0