Javascript variable in the Django template

Question

Javascript variable in the Django template

Navigation

#1 by (0 votes)

0

But I'm not sure how to do that.

Example of what I want to do:

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

I know that with python it's very simple, however I'm using a webservice in 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);
    }
};

javascript django python-3.x django-templates

asked by anonymous 24.10.2018 / 22:52

1 answer

Find the last position of the matrix configures bind9 dmz

score 0 · Answer 1

You can create an element that will only serve to show the error and leave it hidden with CSS. When there is some error just modify your content by JS and show it.

I made an example using fetch but the operation is the same, the callback function will execute when the request returns.

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>