1

I have a "registration" page where the user fills some info, including some bank account info.

There are 2 ways the user can Select a bank (and load the info from that bank):

  1. He can Select the name of the bank from the selectOneMenu, and the code of the Bank will be loaded into the inpuText;
  2. He can fill the code of the Bank into the inputText, and the Bank will be selected from the selectOneMenu.

The first part of the function is working fine, I'm having a problem when I try to select an item from the ComboBox after inserting the code into the inputText.

This is the page component:

<p:panel header="Dados Bancários" toggleable="true" toggleableHeader="true" id="panelBancoPF">
  <h:panelGrid columns="2" columnClasses="coluna1,coluna2">
    <h:outputText value="Código do Banco: " />
    <h:panelGrid columns="4" columnClasses="coluna2,coluna1,coluna2,coluna2">
      <h:inputText size="10" onkeypress="mascaraInteiro(this);" value="#{pess.dsnobanco}" maxlength="38">
        <p:ajax onstart="PF('dialogProcessando').show();"
          onsuccess="PF('dialogProcessando').hide();"
          onerror="PF('dialogProcessando').hide();"
          oncomplete="PF('dialogProcessando').hide();"
          event="change"
          listener="#{cadastroPeritoControl.encontraBanco('Fisica')}"/>
        </h:inputText>

        <h:outputText value="Nome do Banco: " />
        <p:selectOneMenu id="listaNomesBancos" size="50" widgetVar="editaBanco"
          filterMatchMode="contains" value="#{cadastroPeritoControl.bancoSelecionado}"
          converter="CptbancoConverter" rendered="#{not empty cadastroPeritoControl.listaBancos}"
          maxlength="200" onkeyup="maiuscula(this)" >
          <f:selectItem itemValue="" itemLabel="" noSelectionOption="true" />
          <f:selectItems value="#{cadastroPeritoControl.listaBancos}"
            var="banco" itemLabel="#{banco.fullName}" />
          <p:ajax event="change" update="formPrincipal:panelBancoPF"
            listener="#{cadastroPeritoControl.bancoOnChange('Fisica')}"
            onstart="PF('dialogProcessando').show();"
            onsuccess="PF('dialogProcessando').hide();"
            onerror="PF('dialogProcessando').hide();"
            oncomplete="PF('dialogProcessando').hide();" />
        </p:selectOneMenu>
      </h:panelGrid>
....

First I've tried updating the "bancoSelecionado" Object in the backend, but that was just overwriting the last selected Object, so I've saw there's a selectValue(value) function on PrimeFaces that looks like it's exactly what I need, but I don't know how to use it, and every place I've tried to put it didn't worked.

if someone can give me an example of how to use this selectValue(value) function, or if there's a better way to do it using PrimeFaces, or creating a function on the backend (Java) I'd appreciate it.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Michael Rodrigues
  • 13
  • 3
  • "First I've tried updating the "bancoSelecionado" Object in the backend, but that was just overwriting the last selected Object" You need to do`p:ajax update="listaNomesBancos"` to update the component. – Jasper de Vries Aug 24 '23 at 15:56
  • See https://stackoverflow.com/questions/25339056/understanding-primefaces-process-update-and-jsf-fajax-execute-render-attributes – Jasper de Vries Aug 25 '23 at 07:33
  • Sorry for the late response @JasperdeVries , I tried your suggestion, but it just kept overwriting the last option selected. I've found a way to do this with the "selectValue(value)" function, I'm testing it now, and if it works I'll share the final code here. – Michael Rodrigues Aug 25 '23 at 16:30

1 Answers1

0

This was the solution I found, I added an "onblur" event in the inputText that calls a Script function to get the value entered and use the PrimeFaces "selectValue" function to set that value in the ComboBox.

<p:panel header="Dados Bancários" toggleable="true" toggleableHeader="true" id="panelBancoPF">
    <h:panelGrid columns="2" columnClasses="coluna1,coluna2">
        <h:outputText value="Código do Banco: " />
        <h:panelGrid columns="4" columnClasses="coluna2,coluna1,coluna2,coluna2">
            <h:inputText id="codigoBancoPF" size="10"
                onkeypress="mascaraInteiro(this);" value="#{pess.dsnobanco}"
                maxlength="38" onblur="atualizaComboBanco();">
                <p:ajax onstart="PF('dialogProcessando').show();"
                    onsuccess="PF('dialogProcessando').hide();"
                    onerror="PF('dialogProcessando').hide();"
                    oncomplete="PF('dialogProcessando').hide();"
                    event="change" />
            </h:inputText>

            <h:outputText value="Nome do Banco: " />
            <p:selectOneMenu id="listaNomesBancosPF" size="50" widgetVar="editaBancoPF"
                filter="true" filterMatchMode="contains"
                value="#{cadastroPeritoControl.bancoSelecionado}" converter="CptbancoConverter"
                rendered="#{not empty cadastroPeritoControl.listaBancos}"
                maxlength="200" onkeyup="maiuscula(this)">
                <f:selectItem itemValue="" itemLabel="" noSelectionOption="true" />
                <f:selectItems value="#{cadastroPeritoControl.listaBancos}"
                    var="banco" itemLabel="#{banco.fullName}" />
                <p:ajax event="change" update="formPrincipal:panelBancoPF"
                    listener="#{cadastroPeritoControl.bancoOnChange('Fisica')}"
                    onstart="PF('dialogProcessando').show();"
                    onsuccess="PF('dialogProcessando').hide();"
                    onerror="PF('dialogProcessando').hide();"
                    oncomplete="PF('dialogProcessando').hide();" />
            </p:selectOneMenu>
        </h:panelGrid>
    </h:panelGrid>
</p:panel>

<script>
    function atualizaComboBanco() {
        var codigoBancoPF = getCodigoBancoHtml();
        PF('editaBancoPF').selectValue(codigoBancoPF);
    }
    
    function getCodigoBancoHtml() {
        return document.getElementById('formPrincipal:codigoBancoPF').value;
    }
</script>
Michael Rodrigues
  • 13
  • 3