Olá, o span não está aparecendo ao colocar uma url inválida, já verifiquei e tudo está correto, inclusive testei com o projeto final e o span continua não aparecendo. O que pode ser? Já tentei atualizar a página com CTRL + F5 também e não resolveu.
Olá, o span não está aparecendo ao colocar uma url inválida, já verifiquei e tudo está correto, inclusive testei com o projeto final e o span continua não aparecendo. O que pode ser? Já tentei atualizar a página com CTRL + F5 também e não resolveu.
Oi Daniel tudo bem?
Poderia postar o código aqui por gentileza para analisarmos ?
Segue o código da função busca-pacientes.js e o html:
var botaoAdicionar = document.querySelector("#buscar-pacientes");
botaoAdicionar.addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
xhr.addEventListener("load", function() {
//Adição aqui
var erroAjax = document.querySelector("#erro-ajax");
if (xhr.status == 200) {
erroAjax.classList.add("invisivel");
var resposta = xhr.responseText;
var pacientes = JSON.parse(resposta);
pacientes.forEach(function(paciente) {
adicionaPacienteNaTabela(paciente);
});
} else {
erroAjax.classList.remove("invisivel");
}
});
xhr.send();
});<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<h1 class="titulo">Aparecida Nutrição</h1>
</div>
</header>
<main>
<section class="container">
<h2>Meus pacientes</h2>
<label for="filtrar-tabela">Filtre:</label>
<input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Peso(kg)</th>
<th>Altura(m)</th>
<th>Gordura Corporal(%)</th>
<th>IMC</th>
</tr>
</thead>
<tbody id="tabela-pacientes">
<tr class="paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>
</table>
<span id="erro-ajax" class="invisivel">Erro ao buscar os pacientes</span>
<button id="buscar-pacientes" class="botao bto-principal">Buscar pacientes</button>
</section>
</main>
<br>
<!-- ... -->
<section class="container">
<h2 id="titulo-form">Adicionar novo paciente</h2>
<ul id="mensagens-erro"></ul>
<form id="form-adiciona">
<div class="grupo">
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">Peso:</label>
<input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Altura:</label>
<input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">% de Gordura:</label>
<input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
</div>
<button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
</form>
</section>
<script src="js/calcula-imc.js"></script>
<script src="js/form.js"></script>
<script src="js/remove-paciente.js"></script>
<script src="js/filtra.js"></script>
<script src="js/busca-pacientes.js"></script>
</body>
</html>Você quer colocar uma url inválida aqui xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes"); ?
Porque quer fazer isso?
Sim, exatamente nesse lugar. É uma forma de mostrar ao usuário caso tenha ocorrido algum erro, pelo menos foi isso que foi visto no curso.
Blz, entendi. To tentando achar uma solução, tentei com try catch mas não deu certo. To tentado ir pela abordagem de exibir o erro quando for começar a carregar e depois ocultar se deu ok.
Ajax as vezes é chatinho de trabalhar. O máximo que consegui chegar foi isso.
<script>
var botaoAdicionar = document.querySelector("#buscar-pacientes");
botaoAdicionar.addEventListener("click", function () {
var xhr = new XMLHttpRequest();
var erroAjax = document.querySelector("#erro-ajax");
erroAjax.innerText="Carregando...";
erroAjax.classList.remove("invisivel");
xhr.open("GET", "https://api-pacientes.herokuapp.com/pacientes");
xhr.addEventListener("load", function () {
//Adição aqui
if (xhr.status == 200) {
erroAjax.classList.add("invisivel");
var resposta = xhr.responseText;
var pacientes = JSON.parse(resposta);
pacientes.forEach(function (paciente) {
adicionaPacienteNaTabela(paciente);
});
} else {
erroAjax.classList.remove("invisivel");
}
});
try{
xhr.send();
erroAjax.innerText="Carregando... se demorar mais de 1 segundo é porque deu erro.";
}
catch(err){
erroAjax.classList.add("invisivel");
}
});
</script>
É que nome não resolvido não dispara bem o gatilho de erro. Mas o javascript está evoluindo a cada dia, quem sabe no futuro os desenvolvedores dele não fazem uma solução melhor.
Espero ter ajudado!!!