How can I update only one component in PrimeFaces?

1.4k Views Asked by At

I explain my problem to you: I have an application with two comboboxes (selectOneMenu), and a spinner that must be updated depending on what is selected in the second combobox.

I have managed this action by activating ajax in the backing bean a method that evaluates the corresponding data, and then updates the spinner. But I update the entire form, even though I tell you to do it only on the spinner.

I show you a screen:

enter image description here

The spinner that has the label "Salario", must be updated according to what is selected in the combobox labeled "Puesto". I show you another screen with what happens when I make the selection: enter image description here

I've tried enclosing the spinner in a separate panelGrid, and updating this panelGrid from the bean, but it still deletes the selection of the first combobox.

I also tell you from the bean to update only the spinner, but it does not work.

The code of the method that updates from the bean is as follows:

    public void obtenerSueldo(){

        //System.out.println(puesto.getSalarioBase());

        if(puesto != null){
            this.contrato.setSalario(puesto.getSalarioBase());
            System.out.println("Salario actualizado por código:" + this.contrato.getSalario());
            RequestContext contexto = RequestContext.getCurrentInstance();
            contexto.update("fomulario:txtSalario");
            //contexto.update("formulario:panel1");
        }else{
            this.contrato.setSalario(0.0);
        }
    }

And the xhtml code is as follows:

<h:form id="formulario">
            <h:panelGrid id="panel" columns="4">
                <p:outputLabel value="Persona" style="font-weight: bold;"/>
                <p:selectOneMenu id="cboPersona" value="#{contratoFormBean.persona}" required="true" requiredMessage="Debe seleccionar una persona"
                    rendered="#{contratoFormBean.contrato.idContrato == 0}"
                    converter="omnifaces.SelectItemsConverter">
                    <f:selectItem itemLabel="--Seleccione--" itemValue="#{null}"
                        noSelectionOption="true" />
                    <f:selectItems value="#{contratoFormBean.lstPersonas}" var="per"
                        itemLabel="#{per.nombreCompleto}" itemValue="#{per}" />
                </p:selectOneMenu>
                <p:outputLabel value="#{contratoFormBean.persona.nombreCompleto}"
                    rendered="#{contratoFormBean.contrato.idContrato != 0}" />
                <p:message for="cboPersona" />
                <p:tooltip for="cboPersona" value="Elija una persona para el contrato"/>

                <p:outputLabel value="Puesto" style="font-weight: bold;" />
                <p:selectOneMenu id="cboPuesto" value="#{contratoFormBean.puesto}" required="true"
                    update="txtSalario"
                    requiredMessage="Debe seleccionar un puesto de trabajo" 
                    rendered="#{contratoFormBean.contrato.idContrato == 0}"
                    converter="omnifaces.SelectItemsConverter">
                    <p:ajax listener="#{contratoFormBean.obtenerSueldo()}" />
                    <f:selectItem itemLabel="--Seleccione--" itemValue="#{null}"
                        noSelectionOption="true" />
                    <f:selectItems value="#{contratoFormBean.lstPuestos}" var="pue"
                        itemLabel="#{pue.nombre}" itemValue="#{pue}" />
                </p:selectOneMenu>
                <p:outputLabel value="#{contratoFormBean.puesto.nombre}"
                    rendered="#{contratoFormBean.contrato.idContrato != 0}" />
                <p:message for="cboPuesto" />
                <p:tooltip for="cboPuesto" value="Elija una puesto para la persona"/>

                <p:outputLabel value="Fecha Inicio" style="font-weight: bold;"/>
                <p:calendar id="txtFecha" value="#{contratoFormBean.contrato.fechaInicio}" required="true" requiredMessage="Debe indicar una fecha de inicio de contrato"
                    rendered="#{contratoFormBean.contrato.idContrato == 0}" locale="es" pattern="dd/MM/yyyy" mask="99/99/9999"/>
                <p:outputLabel value="#{contratoFormBean.contrato.fechaInicio}"
                    rendered="#{contratoFormBean.contrato.idContrato != 0}" >
                    <f:convertDateTime pattern="dd/MM/yyyy" />
                </p:outputLabel>
                <p:message for="txtFecha" />
                <p:tooltip for="txtFecha" value="Elija una fecha de inicio para el contrato"/>

                <p:outputLabel value="Fecha Fin" style="font-weight: bold;"/>
                <p:calendar id="txtFechaFin" value="#{contratoFormBean.contrato.fechaFin}" required="true" requiredMessage="Debe indicar una fecha de fin de contrato"
                    rendered="#{contratoFormBean.contrato.idContrato == 0}" locale="es" pattern="dd/MM/yyyy" mask="99/99/9999"/>
                <p:outputLabel value="#{contratoFormBean.contrato.fechaFin}"
                    rendered="#{contratoFormBean.contrato.idContrato != 0}">
                    <f:convertDateTime pattern="dd/MM/yyyy" style="font-weight: bold;" />
                </p:outputLabel>
                <p:message for="txtFechaFin" />
                <p:tooltip for="txtFechaFin" value="Elija una fecha de finalización para el contrato"/>

                <p:outputLabel value="Salario" style="font-weight: bold;"/>
                <p:spinner id="txtSalario" value="#{contratoFormBean.contrato.salario}" required="true" requiredMessage="El salario es obligatorio"
                    rendered="#{contratoFormBean.contrato.idContrato == 0}" min="#{contratoFormBean.contrato.salario}" validatorMessage="El monto debe ser mayor o igual al salario mínimo"/>
                <p:outputLabel id="etiquetaSalario" value="#{contratoFormBean.contrato.salario}"
                    rendered="#{contratoFormBean.contrato.idContrato != 0}">
                    <f:convertNumber currencySymbol="$" maxFractionDigits="2"
                        maxIntegerDigits="6" type="currency" />
                </p:outputLabel>
                <p:message for="txtSalario" />
                <p:tooltip for="txtSalario" value="Ingrese un salario"/>

            </h:panelGrid>

            <p:commandButton value="Aceptar" update="@form"
                rendered="#{contratoFormBean.contrato.idContrato eq 0}"
                actionListener="#{contratoFormBean.registrar()}"
                action="contrato?faces-redirect=true" />
            <p:commandButton immediate="true" value="Cancelar" action="contrato?faces-redirect=true"
                rendered="#{contratoFormBean.contrato.idContrato eq 0}"/>
            <p:commandButton value="Aceptar" immediate="true"
                action="contrato?faces-redirect=true"
                rendered="#{contratoFormBean.contrato.idContrato != 0}" />


        </h:form>

It would be very helpful for someone to point out where I am failing.

I read on the PrimeFaces page about the partial update, but it is explained about buttons that make different updates, and I do not realize how to do it from the bean.

Thank you for your kind attention.

0

There are 0 best solutions below