Solucionado (ver solução)
Solucionado
(ver solução)
27
respostas

Mensagem não aparece !

Infelizmente minha mensagem não esta aparecendo não apresenta nenhum erro o código, apenas a mensagem não aparece: abaixo segue o código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView" class=""></div>

    <form class="form" onsubmit="negociacaoController.adiciona(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">
        <button class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div> 
    <br>
    <br>
    <div id="negociacoesView"></div>

    <script src="js/app/view/View.js"></script>
    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controllers/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script src="js/app/view/NegociacoesView.js"></script>
    <script src="js/app/models/Mensagem.js"></script>
    <script src="js/app/view/MensagemView.js"></script>

    <script>
        let negociacaoController = new NegociacaoController();
    </script>
</body>
</html>

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
        this._listaNegociacoes = new ListaNegociacoes();
        this._negociacoesView = new NegociacoesView($('#negociacoesView'));
        this._negociacoesView.update(this._listaNegociacoes);

        this._mensagem = new Mensagem();
        this._mensagemView = new MensagemView($('#mensagemView'));
        this._mensagemView.update(this._mensagem);
    }

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociacao adicionada com sucesso';
        this._mensagemView.update(this._mensagem);
        this._negociacoesView.update(this._listaNegociacoes);
        this._limpaFormulario();   
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);    
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();   
    }
}

class MensagemView extends View{

    constructor(elemento) {
        super(elemento);
    }

    _template(model) {

        return model.texto ? `<p class="alert alert-info">${model.texto}</p>` : '<p></p>';
    }

}

class NegociacoesView extends View{

    constructor(elemento) {
        super(elemento);
    }

    _template(model) {

        return `<table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>DATA</th>
                            <th>QUANTIDADE</th>
                            <th>VALOR</th>
                            <th>VOLUME</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${model.negociacoes.map(n =>`

                                <tr>
                                    <td>${DateHelper.dataParaTexto(n.data)}</td>
                                    <td>${n.quantidade}</td>
                                    <td>${n.valor}</td>
                                    <td>${n.volume}</td>
                                </tr>

                            `).join('')}
                    </tbody>
                    <tfoot>
                        <td colspan="3"></td>
                        <td>
                            ${ model.negociacoes.reduce((total, n) => total + n.volume, 0.0)}
                        </td>
                    <tfoot>

             </table>
            `;
    }

}

class View {

    constructor(elemento) {

        this._elemento = elemento;
    }

    update(model){

        this._elemento.innerHTML = this._template(model);
    }
}

Com esses código o navegador no console não apresenta erro algum, porém a linha com a mensagem não está aparecendo. Seria possível me ajudar ?

27 respostas

Rodrigo, compartilhe a classe Mensagem.

Com certeza,

class Mensagem {

    constructor() {

        this._texto;
    }

    get texto() {

        return this._texto;

    }

    set texto(texto) {

        this._texto = texto;
    }
}

Ela não aparece depois de adicionar? Fica azul pelo menos?

Então, até tentei copiar o que você tinha feito e tudo, mas ele não está nem marcando a DIV em azul, mesmo na primeira etapa dos exercícios, nem apresentando a mensagem de inclusão

Mas incluiu a negociação ? Estou smartphone no trem complica enxergar o código. Então vou levantando essas questões para direcionar o olhar.

Entendi, pelo smart realmente deve ser complicado de olhar, o programa está funcionando corretamente, faz as inclusões, limpa os campos, esta totalizando os volumes, só tive dificuldade nesse módulo pois o sistema não está apresentando a linha com a mensagem.

Fica tranquilo que descubro. Vários alunos já passaram dessa parte sem problemas. Eu fico até curioso em saber a causa.

Oi Rodrigo. Estou a caminho empresa. Lá encontra-se meu mac. Daí descubro esse mistério. Me aguarde.

Só uma coisa. Certeza de não aparecer nada no console do Chrome, certo?

Rapaz, peguei o código exatamente como você colou, colei aqui no meu projeto e tudo funcionou conforme o esperado.

Você alega que não há mensagem de erro no console, o que eu vi foi que em seu HTML você criou a pasta view quando na verdade é views. Tudo bem que você alinhou o caminho na tag script, mas isso me faz pensar se você tem algum arquivo duplicado ai e esta se confundindo em sua alteração.

Aguardo seu retorno.

OBS: se você não encontrar nada, só me enviando o projeto zipado do jeito que esta confirmando que o problema ainda persiste.

Tente apagar o cache do seu navegador (não sei se isso vai resolver).

Obrigado pela sua ajuda, vou continuar dando sequencia ao curso e tentar encontrar o que posso ter feito de errado, se não conseguir encontrar como faço para te enviar o projeto zipado ?

Pode continuar o curso, mas eu quero muito seu arquivo zipado do jeito que esta.

Você tem dropbox? Sobe ele e me passa o link. Se tem github, sobe ele que eu clono.

Dos mais de 2000 alunos que já terminaram o curso, esse é o primeiro caso que vejo da mensagem. Por isso estou curioso igual a você para descobrir o que é.

Com disse, peguei seu código como está e coloquei no meu projeto e tudo funcionou. Mais mistério ainda :)

Segue o link do dropbox: https://www.dropbox.com/sh/jt5h8efeol0heuj/AAD1siAMALdHuzlO8aq9nhUua?dl=0

também achei bem estranho, pois não vi nenhum erro semelhante.

Baixei. Agora de descobrir o mistério. Pode tomar um café ai, fazer 10 flexões. Daqui a pouco eu volto aqui...

Rodrigo, eu peguei seu projeto! Quando eu adiciono negociação a mensagem esta sendo exibida.

Ué... é esse o zip mesmo com problema?

Vou baixar novamente e pagar os projetos que tenho de outros alunos aqui. Para ter certeza que estou no projeto certo.

Então, esta exibindo a mensagem aqui depois que adiciono uma negociação.

Qual navegador você esta usando? Inglês ou português?

Isso que me deixou mais intrigado, sim é esse projeto mesmo, estou utilizando o Google Chrome versão português brasil mas então pode ser alguma configuração da minha maquina que está modificando a apresentação do projeto. O projeto está correto, vou procurar outro meio para descobrir esse erro. deve ser com certeza algo na minha maquina.

Totalmente off-topic aqui, mas que exemplo do Professor Flávio. Dá gosto de ver você ajudando os alunos, e mais vontade ainda de fazer cursos que sejam você o instrutor. Parabéns.

você experimentou apagar o cache do navegador? Mas apagar tudo mesmo? Fez um novo teste depois?

Tipo, você pode testar no firefox mesmo sem chegar na parte que resolve o campo da data. Nesse caso, digita alguma coisa só para ele passar na validação.

Ao meu ver, só pode ser algum cache maroto.

Eu vou, preencho os dados, clico em adicionar, a negociação aparece na lista e a mensagem azul também.

Tem como você subir um print da sua tela depois de incluir, depois, outro print abrindo o terminal e inspecionando o DOM... deixar mais ou menos na área que a mensagem apareceria para eu ver a estrutura do DOM naquele momento?

Efetuei o teste no Firefox, e a mensagem apareceu corretamente, realmente o problema está no chrome. Muito obrigado pela sua tempestividade em resolver o meu problema e meus parabéns pelo curso realmente muito bom. estou aprendendo bastante.

Oi Emerson, valeu pelo feedback! Mas esse caso aqui esta muito misterioso. Mas a gente vai descobrir...

solução!

Então, o Chrome não tem problema de compatibilidade até onde eu sei. Qual a versão que vc esta usando e de qual sistema operacional?

Limpou o cache como pedi e fez o teste?

Sim, efetuei toda a limpeza do navegador e a mensagem apareceu, o meu navegador estava com algum problema tive que reinstalar agora, pois até a pagina da globo.com ao clicar em noticias ficava caindo, porém ao retirar todos os dados e refazer a instalação o projeto voltou a funcionar corretamente e completamente. Muito obrigado pela sua ajuda.

Que boa notícia. Então, meu chute é o seguinte. Em algum momento seu chrome fez cache do script do controller antes da inclusão da mensagem. POr isso ela não era exibida. Mas o estranho é que por padrão ele não deveria fazer, porque você não esta lendo de um server e tals.

Dai vem a última pergunta: você tem algum plugin do Chrome, algum programa diferente instalado?

Então, só para eu me situar. Depois do que você fez a mensagem passou a ser exibida e o projeto esta funcionando como o previsto. Certo?

Não possuo plugins, ainda não consegui descobrir qual o problema eu tive, pois até a globo.com não estava funconando. Quanto a isso não vou conseguir te ajudar, pois meus problemas com o Chrome são constantes, mas acredito que ele estava sim salvando todo o cache do projeto pois mesmo reiniciando a pagina as variáveis não estavam sendo apagadas. Agora que me toquei que ele podia estar salvando todo o cache do sistema e poderia estar bugando algumas coisas. Mas não posso te dizer com certeza o que fiz para o sistema voltar a funcionar, apenas apaguei todas as informações do navegador e reinstalei.

Flávio, Aconteceu o mesmo comigo, porém como eu fiz sem o if ternário para ver a barra alert do bootstrap vazia, aconteceu uma situação oposta que aquela do vídeo. Então, sem utilizar if ternário funciona normalmente e parece que o navegador já garante que o modelo não esteja vazio. Com o if ternário não funciona em nenhum navegador. Talvez isso acrescente mais dados a discussão. Abs.