Entrar Ainda não tem acesso?
2
respostas

A tela recarrega quando eu deleto um cliente

Referente ao curso JS na web: CRUD com JavaScript assíncrono, no capítulo Criar e remover clientes e atividade Deletando um cliente

por Thaynara Lima da Silva
| 82.5k xp | 59 posts

A função de deletar está funcionando bem, ela deleta o cliente certo, mas quando eu aperto o botão de deleta a página recarrega invés de apenas remover o cliente:

no arquivo cliente-service.js:

const removeCliente = (id) => {
    return fetch(`http://localhost:3000/profile/${id}`, { 
        method: "DELETE"
    })
}

no arquivo lista-de-clientes-controller.js: 

tabela.addEventListener("click", (event) => {
    let botaoDeletar = event.target.className === 'botao-simples botao-simples--excluir'
    
    if (botaoDeletar) {
        const linhaCliente = event.target.closest('[data-id]')
        let id = linhaCliente.dataset.id
        
        clienteService.removeCliente(id)
        .then( () => {  //esta atualizando a pagina
            linhaCliente.remove()
        })

Percebi que quando tiro o then() ele para de recarregar a pagina, então o problema talvez esteja ai?

2 respostas
por Renan Lima
| 3640.6k xp | 7680 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Thaynara! Parece que você está fazendo um ótimo trabalho com seu projeto JavaScript. Quanto à sua dúvida, é importante notar que o comportamento que você está experimentando pode ser devido ao fato de que você está clicando em um botão dentro de um formulário.

No HTML, quando um botão é clicado dentro de um formulário, o comportamento padrão é enviar o formulário, o que resulta em um recarregamento da página. Para evitar isso, você pode usar o método preventDefault() do objeto de evento em JavaScript.

Aqui está um exemplo de como você pode modificar seu código para evitar o recarregamento da página:

tabela.addEventListener("click", (event) => {
    event.preventDefault(); // Adicione esta linha
    let botaoDeletar = event.target.className === 'botao-simples botao-simples--excluir'
    
    if (botaoDeletar) {
        const linhaCliente = event.target.closest('[data-id]')
        let id = linhaCliente.dataset.id
        
        clienteService.removeCliente(id)
        .then( () => {  
            linhaCliente.remove()
        })
    }
});

Neste exemplo, event.preventDefault() impede que o formulário seja enviado (e a página seja recarregada) quando o botão é clicado.

Espero ter ajudado e bons estudos!

por Thaynara Lima da Silva
| 82.5k xp | 59 posts

agora eu coloquei assim: 

tabela.addEventListener("click", (event) => {
    event.preventDefault() //adicionei essa linha
    let botaoDeletar = event.target.className === 'botao-simples botao-simples--excluir'
    if (botaoDeletar) {
        const linhaCliente = event.target.closest('[data-id]') 
        let id = linhaCliente.dataset.id
        clienteService.removeCliente(id)
        .then( () => { 
            linhaCliente.remove()
        })
    }
})

Mas ainda assim a pagina continua recarregando quando eu aperto o botão de excluir. Ele exclui o elemento e recarrega a pagina