Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Não direciona a tela cadastro_concluido.html

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

por Thiago Aucelírio da Cunha
| 131k xp | 5 posts
Analista Econômico-Financeiro

Não consigo identificar o motivo de não estar abrindo a tela de Cadastro concluído, mesmo efetuando o cadastro do cliente na tela Clientes. Percebi dois erros no console, mas não sei identificar se esse pode ser o motivo:

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

O meu arquivo cadastraCliente-controller.js está com o código abaixo, que me parece identico ao da aula. Até coloquei um console.log dentro do .then da execução do criaCliente, mas ele não aparece no console do navegador.

import { clienteService } from "../service/cliente-service.js";

const formulario = document.querySelector('[data-form]')

formulario.addEventListener('submit', (evento) => { evento.preventDefault const nome = evento.target.querySelector('[data-nome]').value const email = evento.target.querySelector('[data-email]').value

clienteService.criaCliente(nome, email)
.then(()=> {
    console.log('passei aqui')
    window.location.href = '.../telas/cadastro_concluido.html'
})

})

6 respostas
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Thiago, Beleza?

Percebi que no trecho abaixo você colocou três pontos definindo uma parte da url.

Faz a alteração:

De: window.location.href = '.../telas/cadastro_concluido.html'

Para: window.location.href = '../telas/cadastro_concluido.html'

Tenta fazer isso e informa se resolveu.

Abs.

por Thiago Aucelírio da Cunha
| 131k xp | 5 posts
Analista Econômico-Financeiro

E aí Eraldo. Tudo certo, e contigo? Essa alteração de dois pontos para três foi uma das tentativas que fiz pra tentar fazer funcionar. Voltei para dois pontos e continua não indo, infelizmente. Minha suspeita é que o return na função criaCliente esteja parando a execução da ação

const listaClientes = () => {
    return fetch(`http://localhost:3000/profile`)
    .then(resposta => {
        return resposta.json()
    })

}

const criaCliente = (nome, email) => {

    return fetch(`http://localhost:3000/profile`, {
        method: 'POST',
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify({
            nome: nome,
            email: email
        }) 
    })
    .then( resposta => {
        return resposta.body;
    })

}

export const clienteService = {
    listaClientes,
    criaCliente
}
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Thiago,

Entendi... é isso mesmo, precisamos ir testando as possibilidades. ;D

Nesse novo trecho de código percebi que vc da return no fetch. Retira esses returns do inicio... o fetch pode ser passado direto.

O ideal seria vc disponibilizar seu projeto no github para darmos uma olhada pra tentar te ajudar melhor.

Abs.

por Thiago Aucelírio da Cunha
| 131k xp | 5 posts
Analista Econômico-Financeiro

Vou tentar compartilhar, vai ser minha primeira tentativa. Eu até iniciei umas aulas seguintes, pra ver se continuando poderia encontrar a solução, mas não foi. Veja se é esse link mesmo.

https://github.com/thiagocunha88/Cursos/tree/main/JavaScript/JS_na_web_-_CRUD_com_JavaScript_assincrono

Estou recomeçando este curso, porque tive uma pausa no meio pra iniciar a imersão, acabei fazendo outra imersão logo em seguida. Quando se para no meio a coisa não vai certa. Caso consiga me ajudar, retomarei. Obrigado.

solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Thiago!

Vou tentar descrever o que fiz para achar o "problema" na aplicação.

Rodei sua aplicação e acessei a tela de cadastro de novo cliente. Percebi que a tela fez um reload muito rápido voltando para a tela de cadastro.

Fui na página de cadastro e acessei o arquivo cadastraCliente-controller.js para checar o código.

Percebi que você colocou um prevetDefault, no evento do clique no botão, porém não executou essa função.

O submit tem o comportamento padrão de enviar os dados fazendo reload da página e realmente precisamos colocar o preventDefault() no evento para que ele não se comporte da maneira padrão.

A única coisa que fiz foi chamar a função com ()... ficando: evento.preventDefault()

Aqui rodou a tela de cadastro realizado e acredito que vai funcionar da forma que você queira agora.

Bons estudos! Espero ter ajudado.

Obs.: Fiz o fork do teu repositório para submeter uma pullrequest. Como estou tentando entender melhor o Github fiz dessa forma para contribuir com o teu repositorio. Dá uma olhada lá e aceita o pullrequest, para fazer o merge e atulizar teu código. ;D

Abs!

por Thiago Aucelírio da Cunha
| 131k xp | 5 posts
Analista Econômico-Financeiro

Muito obrigado, amigo, funcionou. Passou despercebido por mim, mas não por você. Vou dar seguimento ao curso. Novamente, muito obrigado.