Discussoes de Programacao e Tecnologia

[RESOLVIDO] Habilitar um campo quando seleciono um determinado item do<p:selectOneMenu/>

8 respostas
H
hebaum

Olá Pessoal, estou começando a trabalhar com primefaces e me surgiu um problema que não consegui resolver, espero que possam me ajudar. É problema é este:

Estou fazendo um formulário utilizando o primefaces e tenho um <p:selectOneMenu/> com dados populados, quero que aconteça o seguinte, quando eu selecionar um item desta combo quero que seja habilitado ou desabilitado um <p:inputText>, abaixo segue meu código:

<h:outputLabel value="Tipo: *" /> 
                    <p:selectOneMenu value="#{inscricaoController.inscricao.tipo}" 
                                     id="tipo" 
                                     label="Tipo" 
                                     required="true">                        
                        <f:selectItem itemLabel="Selecione um Tipo" itemValue=""/>
                        <f:selectItems value="#{inscricaoController.tipos}" />
                    </p:selectOneMenu>                    

                    <h:outputLabel value="Nome: *" />  
                    <p:inputText value="#{inscricaoController.inscricao.nome}" 
                                 id="nome" 
                                 label="Nome" 
                                 required="true" 
                                 size="50" 
                                 maxlength="45"
                                 style="text-transform:uppercase">  
                        <f:validateLength minimum="5" />  
                    </p:inputText>

quando eu selecionar um tipo desta combo quero habilitar o inputText nome.

Desde já agradeço a ajuda.

Abraços.

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

8 Respostas

C
CristianPalmaSola10 1 like
Bom para começar coloque seu codigo entre as tags 
para que ele seja mais facilmente visualizado

e pra solucionar o ser problema tente algo mais ou menos assim

[code]

&lt;h:outputLabel value="Tipo: *" /&gt; 
&lt;p:selectOneMenu value="#{inscricaoController.inscricao.tipo}"  id="tipo"  label="Tipo"  required="true"&gt; 
     &lt;f:selectItem itemLabel="Selecione um Tipo" itemValue=""/&gt; 
     &lt;f:selectItems value="#{inscricaoController.tipos}" /&gt; 

     &lt;!-- faltou a letra de identificação da biblioteca na frente do ajas porque nao me lembro --&gt;
     &lt;ajax event="change" process="@this" update="panelCampo" /&gt;
&lt;/p:selectOneMenu&gt; 

&lt;p:outoutPanel id="panelCampo"&gt;
&lt;h:outputLabel value="Nome: *" /&gt; 

&lt;p:inputText value="#{inscricaoController.inscricao.nome}"  id="nome"  label="Nome"  required="true"  size="50"  maxlength="45"  style="text-transform:uppercase" rendered="#{inscricaoController.inscricao.tipo == 1}"&gt; 
       &lt;f:validateLength minimum="5" /&gt; 
&lt;/p:inputText&gt; 

&lt;/outputPanel&gt;

consegui entender ?

ate mais boa sorte

H
hebaum

Cara, obrigado pela ajuda, funcionou aqui, mas tem como eu atualizar este campo sem colocar ele dentro de um <p:outoutPanel>?

É que é assim, se este tipo meu for “ALUNO” deverá habilitar 2 campos, e habilitar outro.
Se for do tipo “PROFISSIONAL” deverá habilitar outro, e desabilitar outro, e assim por diante em 4 opções.

E colocando dentro do <p:outoutPanel> está desconfigurando minha janela, segue abaixo o meu código inteiro

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Inscrição Semana Jurídica - FEATI</title>
    </h:head>
    <script>
        
        function setCPF() {  
            nome.style.background = "#FFFFFF";  
        }         
    </script>

    <h:body style="font-size: 12px">
        <h:form id="form">
            <p:growl id="msgs"/>
            <p:panel header="Inscrição da Semana Jurídica FEATI">  

                <h:panelGrid columns="2" cellpadding="2">  

                    <h:outputLabel value="Tipo: *" />   
                    <p:selectOneMenu value="#{inscricaoController.inscricao.tipo}"  
                                     id="tipo"  
                                     label="Tipo"  
                                     required="true">   
                        <f:selectItem itemLabel="Selecione um Tipo" itemValue=""/>   
                        <f:selectItems value="#{inscricaoController.tipos}" />   

                        <p:ajax event="change" process="@this" update="nome" />  
                    </p:selectOneMenu>   

                        <h:outputLabel value="Nome: *" />   

                        <p:inputText value="#{inscricaoController.inscricao.nome}"  
                                     id="nome"  
                                     label="Nome"  
                                     required="true"  
                                     size="50"  
                                     maxlength="45" 
                                     style="text-transform:uppercase" 
                                     rendered="#{inscricaoController.inscricao.tipo == 'ALUNO FEATI'}">   
                            <f:validateLength minimum="5" />   
                        </p:inputText>   




                        <h:outputLabel value="CPF: *" />  
                        <p:inputMask value="#{inscricaoController.inscricao.cpf}" 
                                     mask="[CPF removido]" 
                                     id="cpf" 
                                     label="CPF" 
                                     required="true"
                                     size="50"/>

                        <h:outputLabel value="Nascimento: *" /> 
                        <p:calendar value="#{inscricaoController.inscricao.nascimento}" 
                                    pattern="dd/MM/yyyy" 
                                    yearRange="1920:1996" 
                                    readonlyInput="true" 
                                    navigator="true" 
                                    required="true" 
                                    label="Nascimento" 
                                    size="50" />

                        <h:outputLabel value="Instituição: "/> 
                        <p:inputText value="#{inscricaoController.inscricao.instituicao}" 
                                     id="inst" 
                                     size="50" 
                                     maxlength="15"/> 

                        <h:outputLabel value="RM: "/> 
                        <p:inputText value="#{inscricaoController.inscricao.rm}" 
                                     id="rm" 
                                     size="50" 
                                     maxlength="15"/>                    

                        <h:outputLabel value="OAB: "/> 
                        <p:inputText value="#{inscricaoController.inscricao.oab}" 
                                     id="oab" 
                                     size="50" 
                                     maxlength="15"/>

                        <h:outputLabel value="Rua: *" /> 
                        <p:inputText value="#{inscricaoController.inscricao.rua}" 
                                     size="50" 
                                     id="rua" 
                                     label="Rua" 
                                     required="true" 
                                     maxlength="45" 
                                     style="text-transform:uppercase">
                            <f:validateLength minimum="5" />
                        </p:inputText>  

                        <h:outputLabel value="Número: *" /> 
                        <p:keyboard value="#{inscricaoController.inscricao.numero}" 
                                    id="numero" 
                                    label="Número" 
                                    keypadOnly="true" 
                                    required="true" 
                                    size="50" 
                                    maxlength="10"/>

                        <h:outputLabel value="Complemento: " /> 
                        <p:inputText value="#{inscricaoController.inscricao.complemento}" 
                                     id="complemento" 
                                     size="50" 
                                     maxlength="45" 
                                     style="text-transform:uppercase"/>

                        <h:outputLabel value="Bairro: *" /> 
                        <p:inputText value="#{inscricaoController.inscricao.bairro}" 
                                     id="bairro" 
                                     label="Bairro" 
                                     required="true" 
                                     size="50" 
                                     maxlength="45" 
                                     style="text-transform:uppercase">
                            <f:validateLength minimum="3" />
                        </p:inputText>  

                        <h:outputLabel value="CEP: *" /> 
                        <p:inputMask value="#{inscricaoController.inscricao.cep}" 
                                     mask="99.999-999" 
                                     size="50" 
                                     label="CEP" 
                                     required="true"/>

                        <h:outputLabel value="Cidade: *" /> 
                        <p:inputText value="#{inscricaoController.inscricao.cidade}" 
                                     size="50" 
                                     id="cidade" 
                                     label="Cidade" 
                                     required="true" 
                                     maxlength="45" 
                                     style="text-transform:uppercase"/>

                        <h:outputLabel value="Estado: *" /> 
                        <p:selectOneMenu value="#{inscricaoController.inscricao.estado}" 
                                         id="estado" 
                                         label="Estado" 
                                         required="true">
                            <f:selectItem itemLabel="Selecione uma UF"/>
                            <f:selectItems value="#{inscricaoController.estados}" />
                        </p:selectOneMenu>

                        <h:outputLabel value="Telefone Fixo: " /> 
                        <p:inputMask value="#{inscricaoController.inscricao.fixo}" 
                                     mask="(99) 9999 - 9999" 
                                     size="50"/> 

                        <h:outputLabel value="Celular: " /> 
                        <p:inputMask value="#{inscricaoController.inscricao.cel}" 
                                     mask="(99) 9999 - 9999" 
                                     size="50"/>                    


                        <h:outputLabel value="E-mail: *"/>
                        <p:inputText value="#{inscricaoController.inscricao.email}" 
                                     id="mail" 
                                     size="50" 
                                     maxlength="45" 
                                     label="E-Mail" 
                                     validatorMessage="E-mail inválido" 
                                     required="true" 
                                     style="text-transform:uppercase">
                            <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                        </p:inputText>



                        <h:outputLabel value="Como ficou sabendo do evento: *"/>
                        <p:inputText value="#{inscricaoController.inscricao.comoSoube}" 
                                     id="comoSoube" 
                                     label="Como Soube" 
                                     required="true" 
                                     size="50" 
                                     maxlength="45" 
                                     style="text-transform:uppercase"/>  

                        <h:outputLabel value="Código de Verificação: *"/>
                        <p:captcha label="Código de Verificação" 
                                   theme="white"
                                   validatorMessage="O valor digitado no código de verificação está incorreto!"
                                   requiredMessage="O código de verificação deve ser preenchido!"/>


                </h:panelGrid> 
                <p:separator />
                <p:commandButton value="Efetuar Inscrição" actionListener="#{inscricaoController.salvar}" update="msgs"/>

            </p:panel> 
        </h:form>
    </h:body>
</html>

Sou novo ainda em primefaces, agradeço as dicas.

C
CristianPalmaSola10

Acho que sim, da um id para cada campo, e passa o id do campo no update

tenta ai

H
hebaum

cara, fiz isso e não funcionou.

C
CristianPalmaSola10

Entaum coloca um panel por fora de cada campo, ai voce chama o id de cada panel no update

se precisar atualizar dois panel faça

update="panel1 panel2"
H
hebaum

Valeu, caso resolvido.

Abraços

C
CristianPalmaSola10

Beleza ate mais e boa sorte

K
Kleber-rr

Boa tarde a todos.

Sei que o post não é tão recente, mas estou com um problema idêntico. Só que no meu caso, a sugestão do CristianPalmaSola10 não funcionou. Neste caso, eu utilizo um template e em uma das paginas deste template, eu tenho essa selectOneMenu que deve renderizar um campo logo abaixo.

Já tentei outras formas (binding, listener) mas nada deu certo. Simplesmente na pagina não renderiza.

Estou utilizando o primefaces 3.5.

Alguma dica?

Criado 2 de agosto de 2012
Ultima resposta 25 de fev. de 2013
Respostas 8
Participantes 3

Topicos relacionados

JSf - Messages_PT.properties, como eu faco pra usar ele?{mensagens de erro em portugues}{RESOLVIDO} 5 respostas Editar campo usando InCell Editing PrimeFaces 4 respostas Apache Tomcat não esta funcionando 4 respostas Spring Security e MD5 5 respostas Ajuda para configurar projeto Spring no netbeans 1 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo