Primefaces how to fire the Blur event and update the data

Asked

Viewed 89 times

1

I am in need of a help with the Primefaces, I need in this event below that is already halfway forwarded an example that I took from the Primefaces itself more that later I will adapt to what I want, good is an editable grid already working, then you fill in the matricula and will call a method, in this method I will search the information, and fill in two more Datatable fields respectively, my question is, how do I pick up this line that I’m editing and shoot with the Blur event by passing the plate I want to search, and then make it update that same line with these two new fields filled. I fell halfway through on a project at the company, and I’ve never worked with Primefaces. So, briefly, what I need is for the Blur package to work as long as it’s up and running, but I don’t know if it’s the best way and with that I’ll have to take this plate I typed and get it from there in Java so I can do the Employee search and get two pieces of information and fill in the Name and Shift in the code below.

<h:form id="form">
   <p:growl id="msgs" showDetail="true"/>

   <p:dataTable id="cars1" widgetVar="cars1" var="car" value="#{dtAddRowView.cars1}" editable="true" style="margin-bottom:20px">
       <f:facet name="header">
           Funcionários
       </f:facet>

       <p:ajax event="rowEdit" listener="#{dtAddRowView.onRowEdit}" update=":form:msgs" />
       <p:ajax event="rowEditCancel" listener="#{dtAddRowView.onRowCancel}" update=":form:msgs" />

       <p:column headerText="Matricula">
           <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
               <f:facet name="input">
               <p:inputText value="#{car.id}" style="width:100%" label="Matricula">
                    <p:ajax event="blur" listener="#{dtAddRowView.onRowSelect}" update="@form"/>
                </p:inputText>
               </f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Nome">
           <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
               <f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year" disabled="true"/></f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Turno">
           <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
               <f:facet name="input"><p:inputText value="#{car.brand}" style="width:100%" label="Year" disabled="true"/></f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Transporte">
           <p:cellEditor>
               <f:facet name="output"><h:selectBooleanCheckbox value="#{car.soldState}" /></f:facet>
               <f:facet name="input"><p:selectBooleanCheckbox value="#{car.soldState}" style="width:100%" label="Year"/></f:facet>
           </p:cellEditor>
       </p:column>

       <p:column style="width:32px">
           <p:rowEditor />
       </p:column>
   </p:dataTable>

    <div class="ui-g">
        <div class="ui-g-12">
            <p:commandButton value="Novo Registro" styleClass="ui-priority-primary" process="@this" update=":form:msgs"
                             actionListener="#{dtAddRowView.onAddNew()}" oncomplete="PF('cars1').addRow();"/>
        </div>
    </div>

</h:form>
  • Please enter the dtAddRowView.onRowSelect code. I believe it is this way: https://stackoverflow.com/questions/16989728/primefaces-inputtext-desnt-work-with-ajax-event

1 answer

0


The solution I ended up doing was with JSON I will call every request I change something and send at the end as a variable, Solution:

<h:form id="form">
   <p:growl id="msgs" showDetail="true"/>

   <p:dataTable id="dataTableAprovacaoFuncionario" widgetVar="listaAprovacaoFuncionario" var="aprovacaoFuncionario" value="#{aprovacaoFuncionarioHoraExtraView.listaAprovacaoFuncionario}" editable="true" style="margin-bottom:20px">
       <f:facet name="header">
           Funcionários
       </f:facet>

       <p:ajax event="rowEdit" listener="#{aprovacaoFuncionarioHoraExtraView.onRowEdit}" update=":form:msgs, listaAprovacaoFuncionario"/>
       <p:ajax event="rowEditCancel" listener="#{aprovacaoFuncionarioHoraExtraView.onRowCancel}" update=":form:msgs, listaAprovacaoFuncionario"/>

       <p:column headerText="Matricula">
           <p:cellEditor>
               <f:facet name="output">
                   <p:inputText value="#{aprovacaoFuncionario.matricula}" style="width:100%" label="Matricula">
                        <p:ajax event="change" onstart="selectedValueTipoRequisicao()"/>
                        <p:ajax event="change" listener="#{aprovacaoFuncionarioHoraExtraView.selectRowAprovacaoFuncionario(aprovacaoFuncionario)}" update=":form:dataTableAprovacaoFuncionario, :form:msgs, listaAprovacaoFuncionario"/>
                    </p:inputText>
               </f:facet>
               <f:facet name="input">
                   <p:inputText id="matricula" value="#{aprovacaoFuncionario.matricula}" style="width:100%" label="Matricula">
                        <p:ajax event="change" onstart="selectedValueTipoRequisicao()"/>
                        <p:ajax event="change" listener="#{aprovacaoFuncionarioHoraExtraView.selectRowAprovacaoFuncionario(aprovacaoFuncionario)}" update=":form:dataTableAprovacaoFuncionario, :form:msgs, listaAprovacaoFuncionario"/>
                    </p:inputText>
               </f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Nome">
           <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{aprovacaoFuncionario.nome}" /></f:facet>
               <f:facet name="input"><p:inputText value="#{aprovacaoFuncionario.nome}" style="width:100%" label="Nome" disabled="true"/></f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Turno">
           <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{aprovacaoFuncionario.turno}" /></f:facet>
               <f:facet name="input"><p:inputText value="#{aprovacaoFuncionario.turno}" style="width:100%" label="Turno" disabled="true"/></f:facet>
           </p:cellEditor>
       </p:column>

       <p:column headerText="Transporte">
           <p:cellEditor>
               <f:facet name="output">
                    <h:selectBooleanCheckbox value="#{aprovacaoFuncionario.transporte}">
                        <p:ajax event="change" listener="#{aprovacaoFuncionarioHoraExtraView.selectRowAprovacaoFuncionario(aprovacaoFuncionario)}" update=":form:dataTableAprovacaoFuncionario, :form:msgs, listaAprovacaoFuncionario"/>
                    </h:selectBooleanCheckbox>
                </f:facet>
               <f:facet name="input">
                    <p:selectBooleanCheckbox value="#{aprovacaoFuncionario.transporte}" style="width:100%" label="Transporte">
                        <p:ajax event="change" listener="#{aprovacaoFuncionarioHoraExtraView.selectRowAprovacaoFuncionario(aprovacaoFuncionario)}" update=":form:dataTableAprovacaoFuncionario, :form:msgs, listaAprovacaoFuncionario"/>
                    </p:selectBooleanCheckbox>
                </f:facet>
           </p:cellEditor>
       </p:column>

       <p:column style="width:32px">
           <p:rowEditor />
       </p:column>
   </p:dataTable>

    <div class="ui-g">
        <div class="ui-g-12">
            <p:commandButton value="Novo Registro" styleClass="ui-priority-primary" process="@this" update=":form:msgs, listaAprovacaoFuncionario"
                             actionListener="#{aprovacaoFuncionarioHoraExtraView.onAddNew()}" oncomplete="PF('listaAprovacaoFuncionario').addRow();"/>
        </div>
    </div>

</h:form>

<p:inputText id="listaAprovacaoFuncionario" name="listaAprovacaoFuncionario" value="#{aprovacaoFuncionarioHoraExtraView.listaAprovacaoFuncionarioToJSON}" type="hidden">
        <p:ajax/>
</p:inputText>

In java I always update at the end of each method the JSON.

public String getListaAprovacaoFuncionarioToJSON () {

    String jsonListaAprovacaoFuncionario = new Gson().toJson(getListaAprovacaoFuncionario());

    return jsonListaAprovacaoFuncionario;
}

When sending the request picked up the variable:

$.ajax({
    type : "GET",
    url : '/populisII-web/rest/formulariodinamico/' + campoDoFormularioDinamico.idCampo + '/' + campoDoFormularioDinamico.idFormulario + '/porIdCampoEIdFormulario',
    dataType : "json",
    context : this
}).done(function(campoDoFormularioPreenchido){
    this.campoDoFormularioPreenchido = campoDoFormularioPreenchido;

    if (campoDoFormularioPreenchido != null) {

        $('#nomeFluxo').val(campoDoFormularioPreenchido.valorString);

        sessionStorage.removeItem("tipoRequisicao");

        var datasourceJSON = JSON.parse($('#listaAprovacaoFuncionario').val());

         $.each(datasourceJSON, function(index, objNumber) {

            if (index == 0) {
                if (jQuery.isEmptyObject(objNumber)) {
                    mostraInfos(["Informe pelo menos um Funcionário para a Aprovação de Hora Extra."]);
                    return;
                } else {
                    submeteFormulario();                                                    
                }
            }
         });
    }
})  

Browser other questions tagged

You are not signed in. Login or sign up in order to post.