variável do Javascript no template do Django

Question

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);
    }
};

django django templates javascript python 3.x variáveis

fernandosavio · 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>

variável do Javascript no template do Django

One Answer

Add your own answers!

Ask a Question