Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Existe algo semelhante ao reRender do JSF no Thymeleaf ?

por ALBERTO LEITÃO DE OLIVEIRA
| 386.9k xp | 27 posts

Quero exibir/ocultar um campo input, de acordo com o valor do combo box escolhido pelo usuário.

                    <div class="col-md-6 mb-3">
                        <label for="tipoPessoa">Tipo:</label> 
                        <select class="form-control" 
                            id="tipoPessoa" th:field="*{tipoPessoa}"
                            th:errorclass="is-invalid">
                            <option value="1">MEMBRO</option>
                            <option value="2">NÃO MEMBRO</option>
                        </select>
                         <small>Informe se é membro ou não.</small>
                        <div class="invalid-feedback" th:errors="*{tipoPessoa}">
                            Erros no tipo da pessoa
                        </div>
                    </div>

                <div class="form-group" id="divCodigoMembro"  >
                    <label for="codigoPessoa">Código do Membro:</label> 
                    <input
                            type="number" th:field="*{codigoPessoa}" 
                            th:errorclass="is-invalid" class="form-control"
                            placeholder="Código do membro" />
                        <small>Caso a pessoa seja membro, informe o código de membro da pessoa.</small>
                    <div class="invalid-feedback" th:errors="*{codigoPessoa}">
                        Erros no código de membro da pessoa
                    </div>
                </div>
1 resposta
solução!
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Bom dia, Alberto! Tudo bem?

Desculpa pela demora em dar um retorno no seu tópico, estava pesquisando aqui e no JavaScript não temos algo 100% semelhante ao reRender do JSF mas podemos criar funções que são ativadas através de gatilhos. No caso em específico da sua pergunta nós podemos utilizar da onClick(), a cada vez que o usuário clicar em uma opção do combo box ele irá iniciar a função.

No HTML nós colocaríamos a chamada da função onclick no select: 

  <select class="form-control" onclick="selected(this.value)" id="tipoPessoa" th:field="*{tipoPessoa}" th:errorclass="is-invalid">

Já no Javascript, criaríamos uma função que irá receber o valor do select. Dentro da função irá acontecer isso:

  • Vamos selecionar a div que cobre o input Código do membro pelo seu id;
  • Caso o valor selecionado seja 2 (Não membro), irá botar o estilo display = 'none' que irá fazer desaparecer esse campo;
  • Se não, deixe aparecendo com o display: block.
function selected(value){
var tipoMembro = document.getElementById('divCodigoMembro');
    if(value == "2"){
  divCodigoMembro.style.display = 'none';
  } else {
    divCodigoMembro.style.display = 'block';
  }
}

Bons estudos!