1
resposta

Não aparece o ALERT() - Formulário é recarregado.

Na aula "1A classe NegociacaoController", baixei o arquivo disponibilizado para Download "Começando deste ponto? Você pode fazer o download completo do projeto até aqui e continuar seus estudos." e fui realizando as inclusões da explicação. Só que quando tento incluir uma negociação - no teste com o ALERT() a mensagem não aparece e o FORM é recarregado.

Baixei o Download da aula 4, já um pouco mais avançado e fiz o mesmo teste e também não incluir a negociação. A única coisa que vi diferente no console é a crítica de erro abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá Robson,

Eu acredito que o alert() utilizado foi somente para testar se o evento estava sendo chamado, por isso não existe na Aula 4.

Segui os passos e aparentemente consegui o mesmo resultado mostrado no vídeo. Vou postar aqui o código fonte.

client/js/app/controllers/NegociacaoController.js

class NegociacaoController {
    adiciona(event) {
        event.preventDefault();
        alert('Chamei ação no controller');
    }
}

client/index.html

<!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>
        <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>
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
        <script src="js/app/models/Negociacao.js"></script>
        <script src="js/app/controllers/NegociacaoController.js"></script>
        <script>
            let negociacaoController = new NegociacaoController();
        </script>
    </body>
</html>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software