Entrar Ainda não tem acesso?
2
respostas

Duvida preventDefault()

Referente ao curso JavaScript: criando requisições, no capítulo Lidando com erros e atividade Carregamento da lista

por Patricia Carriero Celestrino da Silva
| 91.9k xp | 2 posts

Estou tentando fazer uma função que, assim que o usuário preencha os dados e realize o submit, gostaria de ocultar tudo que tenho na tela, e mostrar apenas um bloco com uma mensagem de sucesso e um botão de continuar. O código esta o seguinte:

async function criarVideo(evento) {
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random() * 10).toString();
    try {
        await conectaApi.criaVideo(titulo, descricao, url, imagem);
        const body = document.querySelector('body');
        const sumir = document.querySelector('.sucesso');
        sumir.style.display = "none";
        const sucesso = document.createElement("div");
        sucesso.className = "centraliza";
        sucesso.innerHTML = `
            <div class="caixa">
                <h1 class="texto-ok">Usuários criados com sucesso!</h1>
                <button class="botao-ok" onclick="location.href='../pages/envio-concluido.html'">Avançar</button>
            </div>
        `
        body.appendChild(sucesso);
    } catch (e) {
        alert(e)
    }
}

(criei uma div que engloba tudo que tem no body, e dei uma classe de 'sucesso') Quando ocorre o submit, a função "criaVideo" funciona normalmente, por um instante minha pagina mostra apenas esse código extra que criei, mas ai há um reload na página. O que pode estar acontecendo, e como posso resolver?

2 respostas
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Patricia, como vai? Espero que esteja bem!

O método preventDefault() do objeto de evento que você está utilizando na sua função criarVideo deveria, de fato, prevenir que o formulário seja submetido da maneira tradicional (que causa o recarregamento da página).

Entretanto, o comportamento que você descreveu faz parecer que o preventDefault() não está sendo executado corretamente. Isso pode acontecer se houver algum erro no seu código que esteja impedindo a execução dessa linha.

Uma possibilidade é que a função conectaApi.criaVideo() esteja lançando uma exceção que não está sendo capturada corretamente. Isso faria com que a execução da função criarVideo fosse interrompida antes que o preventDefault() fosse chamado.

Para verificar se isso está acontecendo, você pode tentar mover a chamada para preventDefault() para o início da função, antes de qualquer outra coisa:

async function criarVideo(evento) {
    evento.preventDefault();

    // Resto do código...
}

Dessa forma, você garante que o preventDefault() seja chamado independentemente do que aconteça depois. Se o problema persistir, recomendo que você verifique se há algum outro código que possa estar causando o recarregamento da página.

Espero ter ajudado e bons estudos!

por Patricia Carriero Celestrino da Silva
| 91.9k xp | 2 posts

Boa tarde, Sarah! Estou bem, obrigado. Espero que esteja tudo bem por aí também! Sarah, agradeço o retorno, porém não deu certo, infelizmente. Testei o preventDefault() em todas as funções envolvidas, mas o comportamento ainda é o mesmo. Quando clico no meu submit, o preventDefault() funciona como esperado para que a função de cadastro ocorra corretamente, porém após esse envio de dados ainda há um reload. Continuarei tentando por aqui. Muitíssimo obrigado e tenha um ótimo dia!