AnswerBun.com

variável do Javascript no template do Django

Stack Overflow em Português Asked by Raphael Melo De Lima on November 28, 2020

Fala galera, boa tarde, estou precisando usar uma variável do JS, sendo ela do tipo boolean no template do Django

porém não estou sabendo fazer isso.

Exemplo do que quero fazer:

<!DOCTYPE html>
<html>
    <body>
    <script>
        let showMessage = false;
    </script>
    {% if showMessage %}
         faça isso
    {% else %}
         faça aquilo
    {% endif %}
    </body>
</html>

sei que com python é muito simples, porém estou usando um webservice em JS

registrations.js:

// RETORNO DA API EM JSON - AUTOCOMPLETE DOS INPUT
let showMessage = false;

function callback(content) {
    if (!("erro" in content)) {
        const Inputs = document.querySelectorAll(`form input`);
        Inputs[2].value = (content.logradouro);
        Inputs[4].value = (content.complemento);
        Inputs[5].value = (content.bairro);
        Inputs[6].value = (content.localidade);
        Inputs[7].value = (content.uf);
    } else {
        formClean();
        showMessage = true;  <---- aqui que mudo o valor da variavel
    }
}
// FAZ BUSCA DO CEP - ONBLUR
function searchByCep() {
    const cep = document.querySelector(`#id_zip_code`);
    if (cep.value != "") {

        let script = document.createElement(`script`);
        script.src = 'https://viacep.com.br/ws/' + cep.value + '/json/?callback=callback';

        document.body.appendChild(script);
    }
};

One Answer

Você pode criar um elemento que servirá apenas para mostrar o erro e deixar ele escondido com CSS. Quando houver algum erro basta modificar seu conteúdo por JS e mostrá-lo.

Fiz um exemplo usando fetch mas o funcionamento é o mesmo, a função de callback vai executar quando a requisição retornar.

let cep = document.querySelector('#cep');
let dados = document.querySelector('#dados');
let erro = document.querySelector('#erro');

cep.addEventListener('blur', buscaCep);

function buscaCep(event) {
  // retorna ao estado inicial: erro escondido e dados vazios
  erro.classList.remove('ativo');
  dados.innerHTML = '';
  // faz a requisição ao web serivice
  fetch(`https://viacep.com.br/ws/${this.value}/json/`)
    .then(response => response.json())
    .then(json => {
      // se retornou erro mostar mensagem
      if (json.erro) {
        mostraErro('CEP Inválido');
      } else {
        // senão mostra os dados
        dados.innerHTML = `
            CEP: ${json.cep}
            Logradouro: ${json.logradouro}
            Complemento: ${json.complemento}
            Bairro: ${json.bairro}
            Localidade: ${json.localidade}
            UF: ${json.uf}
            Unidade: ${json.unidade}
            Cód. IBGE: ${json.ibge}
        `;
      }
    })
    .catch(response => {
      // Se ocorreu um erro na request mostra o erro
      mostraErro(response);
    })
}

// Apenas modifica o conteúdo do elemento e adiciona a classe que torna visível
function mostraErro(mensagem) {
  erro.innerHTML = mensagem;
  erro.classList.add('ativo');
}
#erro {
  display: none;
  color: red;
  border: 1px dashed red;
  margin: 10px;
  padding: 5px;
}

#erro.ativo {
  display: block;
}
<input id="cep">
<div id="erro"></div>
<pre id="dados"></pre>

Answered by fernandosavio on November 28, 2020

Add your own answers!

Related Questions

removendo parte de uma string com php

5  Asked on February 8, 2021 by hugo-borges

 

OSError: [Errno 2] No such file or directory

1  Asked on February 6, 2021 by rafael-galleani

 

Como agrupar resultados SQL por mês e ano?

4  Asked on February 6, 2021 by celsomtrindade

     

Erro no arquivo pom.xml do projeto

1  Asked on February 6, 2021 by israel-andrade

     

Upgrade do laravel 5.7 para o 5.8

1  Asked on February 6, 2021 by alvaro-alves

 

htaccess não funciona

0  Asked on February 5, 2021 by raquel-teixeira

         

Como criar um app android usando somente c++ no Android Studio?

2  Asked on February 5, 2021 by rodrigo-santiago

   

Clicar em botão e abrir lista

1  Asked on February 5, 2021 by sergio-guerjik

   

constraint em uma primary key – SQL

1  Asked on February 5, 2021 by j-rodrigues

   

Excel não consegue localizar planilha

1  Asked on February 5, 2021 by krobelusmeetsyndra

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir