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

Codigo é executado duas vezes automaticamente.

Estou trabalhando em uma tabela de estudo personalizável, e ao clicar no botão para salvar, ele automaticamente realiza duas vezes o código.

var botao2 = $(".botao-salvar");// botão-salvar é a classe do botão//
botao2.on("click", function() {
    sincronizaTabela();
    console.log(sincronizaTabela());// os console.log() são para poder monitorar os dados que estão sendo pegos.//
});

function sincronizaTabela (){
    var tabela = [];
    console.log(tabela);
    var linhas = $("tbody>tr");
    console.log(linhas);

    linhas.each(function(){
        var dia = $(this).find("td:nth-child(1)").text();
        console.log(dia);
        var seg = $(this).find("td:nth-child(2)").text();
        console.log(seg);
        var ter = $(this).find("td:nth-child(3)").text();
        console.log(ter);
        var quar = $(this).find("td:nth-child(4)").text();
        console.log(quar);
        var quin = $(this).find("td:nth-child(5)").text();
        console.log(quin);
        var sex = $(this).find("td:nth-child(6)").text();
        console.log(sex);
        var sab = $(this).find("td:nth-child(7)").text();
        console.log(sab);
        var dom = $(this).find("td:nth-child(8)").text();
        console.log(dom);

        var lista = {
            dia: dia,
            seg: seg,
            ter: ter,
            quar: quar,
            quin: quin,
            sex: sex,
            sab: sab,
            dom: dom
        };
        console.log(lista);

        tabela.push(lista);

        var dados = {
            tabela: tabela
        };

        console.log(dados);

        $.post("http://localhost:3000/placar", dados, function(){
            console.log("funcionou no teste 10");
        });
        // estou usando os arquivos do back-end do curso de Jquery, pois ainda não aprendi como montar o servidor, mas é algo que pretendo começar a estudar em breve.//

    });
};
6 respostas

Esse é o único arquivo JS que você tem? O problema não parece estar ai. Ele pode estar salvando duas vezes por causa da submissão do botão.

Por exemplo: ele submete o formulário, fazendo a página atualizar, depois ele executa o JS do Jquery.

Tentou dar um event.preventDefault() pra ver se é isso?

Se tiver outro arquivo JS manda pra gente ver :)

Consegui descobrir o que estava acontecendo, acidentalmente eu dupliquei o codigo dentro de um outro arquivo, mas agora começou a dar o seguinte erro:

POST http://localhost:3000/placar net::ERR_EMPTY_RESPONSE
send @ jquery.js:9392
ajax @ jquery.js:8999
jQuery.(anonymous function) @ jquery.js:9148
(anonymous) @ salva-tabela.js:51
each @ jquery.js:368
each @ jquery.js:157
sincronizaTabela @ salva-tabela.js:13
(anonymous) @ salva-tabela.js:3
dispatch @ jquery.js:5110
elemData.handle @ jquery.js:4918

Já tentei deixar o codigo somente no principal, e só no arquivo referente a salvar a tabela, mas não está adiantando.

solução!

Você tentou retornar o código para como estava antes? Pode ser que o seu código principal esteja tirando a resposta do código que você deletou. Por isso o ajax não recebe a resposta:

O erro foi resposta vazia. Coloca seu código duplicado de novo no lugar e vê se esse erro some. Depois analisa seu código ou posta ele aqui pra ver se a gente encontra de onde seu Jquery tá puxando ele

Sim mesmo com o código duplicado ele continua apresentando o mesmo erro.

var botao = $(".botao");
    botao.on("click", function() {
        inserir();
 });


function inserir () {
    var corpoTabela = $(".listaCurso").find("tbody");
    var num = $(".num").val();
    var seg = $(".seg").val();
    var ter = $(".ter").val();
    var quar = $(".quar").val();
    var quin = $(".quin").val();
    var sex = $(".sex").val();
    var sab = $(".sab").val();
    var dom = $(".dom").val();

    var linha = novaLinha(num, seg, ter, quar, quin, sex, sab, dom);

    corpoTabela.append(linha)
};

function novaLinha(num, s1, t, q1, q2, s2, s3, d){
    var linha = $("<tr>");
    $("<td>").text(num).appendTo(linha);
    $("<td>").text(s1).appendTo(linha);
    $("<td>").text(t).appendTo(linha);
    $("<td>").text(q1).appendTo(linha);
    $("<td>").text(q2).appendTo(linha);
    $("<td>").text(s2).appendTo(linha);
    $("<td>").text(s3).appendTo(linha);
    $("<td>").text(d).appendTo(linha);
    return linha;
};

Acima o codigo do arquivo main.js, e abaixo o codigo responsavel por salvar a tabela.

var botao2 = $(".botao-salvar");// botão-salvar é a classe do botão//
botao2.on("click", function() {
    sincronizaTabela();
    console.log(sincronizaTabela());// os console.log() são para poder monitorar os dados que estão sendo pegos.//
});

function sincronizaTabela (){
    var tabela = [];
    console.log(tabela);
    var linhas = $("tbody>tr");
    console.log(linhas);

    linhas.each(function(){
        var dia = $(this).find("td:nth-child(1)").text();
        console.log(dia);
        var seg = $(this).find("td:nth-child(2)").text();
        console.log(seg);
        var ter = $(this).find("td:nth-child(3)").text();
        console.log(ter);
        var quar = $(this).find("td:nth-child(4)").text();
        console.log(quar);
        var quin = $(this).find("td:nth-child(5)").text();
        console.log(quin);
        var sex = $(this).find("td:nth-child(6)").text();
        console.log(sex);
        var sab = $(this).find("td:nth-child(7)").text();
        console.log(sab);
        var dom = $(this).find("td:nth-child(8)").text();
        console.log(dom);

        var lista = {
            dia: dia,
            seg: seg,
            ter: ter,
            quar: quar,
            quin: quin,
            sex: sex,
            sab: sab,
            dom: dom
        };
        console.log(lista);

        tabela.push(lista);

        var dados = {
            tabela: tabela
        };

        console.log(dados);

        $.post("http://localhost:3000/placar", dados, function(){
            console.log("Placar sincronizado com sucesso");
        });
        // estou usando os arquivos do back-end do curso de Jquery, pois ainda não aprendi como montar o servidor, mas é algo que pretendo começar a estudar em breve.//

    });
};

E apesar de eu achar improvavel que possa ser o problema, também o HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Projeto Calendario Interativo</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <div class="container">
        <div class="center">
            <h1>Tabela de estudos</h1>
            <form>
                <div class="row">
                    <div class="col s12">
                        <label>Semana de estudo Nº:</label>
                        <textarea class="num"></textarea>
                        <label>O que aprender hoje?</label>
                        <textarea class="seg" placeholder="Diga o que aprender na Segunda."></textarea>
                        <textarea class="ter" placeholder="Diga o que aprender na Terça."></textarea>
                        <textarea class="quar" placeholder="Diga o que aprender na Quarta."></textarea>
                        <textarea class="quin" placeholder="Diga o que aprender na Quinta."></textarea>
                        <textarea class="sex" placeholder="Diga o que aprender na Sexta."></textarea>
                        <textarea class="sab" placeholder="Diga o que aprender no Sabado."></textarea>
                        <textarea class="dom" placeholder="Diga o que aprender no Domingo."></textarea>
                    </div>
                </div>
                <div class="btn botao">Salvar</div>
            </form>
        </div>
        <table class="listaCurso bordered striped centered">
            <thead>
            <tr>
                <th>Nº da semana</th>
                <th>Segunda</th>
                <th>Terça</th>
                <th>Quarta</th>
                <th>Quinta</th>
                <th>Sexta</th>
                <th>Sabado</th>
                <th>Domingo</th>
            </tr>
            </thead>
            <tbody class="corpoTabela">
            </tbody>
        </table>
        <div class="btn botao-salvar">Salve a lista</div>
    </div>

<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/salva-tabela.js"></script>
</body>
</html>

Vitor, o erro foi resolvido? Você está recebendo esse erro, mas quando eu rodei ele aqui não deu erro nenhum.

Manda notícia pra saber se tá tudo certo. Sugiro que você, antes de saber se o código tá funcionando, tire o framework CSS, pode ser que ele esteja dando um conflito com a biblioteca JS, já que eu o executei normalmente sem ele.

Segue abaixo o que eu fiz:


</head>
<body>
    <div class="container">
        <div class="center">
            <h1>Tabela de estudos</h1>
            <form>
                <div class="row">
                    <div class="col s12">
                        <label>Semana de estudo Nº:</label>
                        <textarea class="num"></textarea>
                        <label>O que aprender hoje?</label>
                        <textarea class="seg" placeholder="Diga o que aprender na Segunda."></textarea>
                        <textarea class="ter" placeholder="Diga o que aprender na Terça."></textarea>
                        <textarea class="quar" placeholder="Diga o que aprender na Quarta."></textarea>
                        <textarea class="quin" placeholder="Diga o que aprender na Quinta."></textarea>
                        <textarea class="sex" placeholder="Diga o que aprender na Sexta."></textarea>
                        <textarea class="sab" placeholder="Diga o que aprender no Sabado."></textarea>
                        <textarea class="dom" placeholder="Diga o que aprender no Domingo."></textarea>
                    </div>
                </div>
                <div class="btn botao">Salvar</div>
            </form>
        </div>
        <table class="listaCurso bordered striped centered">
            <thead>
            <tr>
                <th>Nº da semana</th>
                <th>Segunda</th>
                <th>Terça</th>
                <th>Quarta</th>
                <th>Quinta</th>
                <th>Sexta</th>
                <th>Sabado</th>
                <th>Domingo</th>
            </tr>
            </thead>
            <tbody class="corpoTabela">
            </tbody>
        </table>
        <div class="btn botao-salvar">Salve a lista</div>
    </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script>

var botao = $(".botao");
    botao.on("click", function() {
        inserir();
 });


function inserir () {
    var corpoTabela = $(".listaCurso").find("tbody");
    var num = $(".num").val();
    var seg = $(".seg").val();
    var ter = $(".ter").val();
    var quar = $(".quar").val();
    var quin = $(".quin").val();
    var sex = $(".sex").val();
    var sab = $(".sab").val();
    var dom = $(".dom").val();

    var linha = novaLinha(num, seg, ter, quar, quin, sex, sab, dom);

    corpoTabela.append(linha)
};

function novaLinha(num, s1, t, q1, q2, s2, s3, d){
    var linha = $("<tr>");
    $("<td>").text(num).appendTo(linha);
    $("<td>").text(s1).appendTo(linha);
    $("<td>").text(t).appendTo(linha);
    $("<td>").text(q1).appendTo(linha);
    $("<td>").text(q2).appendTo(linha);
    $("<td>").text(s2).appendTo(linha);
    $("<td>").text(s3).appendTo(linha);
    $("<td>").text(d).appendTo(linha);
    return linha;
};



var botao2 = $(".botao-salvar");// botão-salvar é a classe do botão//
botao2.on("click", function() {
    sincronizaTabela();
    console.log(sincronizaTabela());// os console.log() são para poder monitorar os dados que estão sendo pegos.//
});

function sincronizaTabela (){
    var tabela = [];
    console.log(tabela);
    var linhas = $("tbody>tr");
    console.log(linhas);

    linhas.each(function(){
        var dia = $(this).find("td:nth-child(1)").text();
        console.log(dia);
        var seg = $(this).find("td:nth-child(2)").text();
        console.log(seg);
        var ter = $(this).find("td:nth-child(3)").text();
        console.log(ter);
        var quar = $(this).find("td:nth-child(4)").text();
        console.log(quar);
        var quin = $(this).find("td:nth-child(5)").text();
        console.log(quin);
        var sex = $(this).find("td:nth-child(6)").text();
        console.log(sex);
        var sab = $(this).find("td:nth-child(7)").text();
        console.log(sab);
        var dom = $(this).find("td:nth-child(8)").text();
        console.log(dom);

        var lista = {
            dia: dia,
            seg: seg,
            ter: ter,
            quar: quar,
            quin: quin,
            sex: sex,
            sab: sab,
            dom: dom
        };
        console.log(lista);

        tabela.push(lista);

        var dados = {
            tabela: tabela
        };

        console.log(dados);

        $.post("http://localhost:3000/placar", dados, function(){
            console.log("Placar sincronizado com sucesso");
        });
        // estou usando os arquivos do back-end do curso de Jquery, pois ainda não aprendi como montar o servidor, mas é algo que pretendo começar a estudar em breve.//

    });
};
</script>

Não mudei absolutamente nada no código, só retirei o framework CSS. Sempre que estiver treinando libs, como o Jquery, faça antes sem as frameworks. Como você está puxando classes de elementos, pode ser que você esteja recebendo partes do framework na resposta de retorno da query.

Não deixe de aprender a usar o Jquery, mas, se possível tente abandone-o. Com as implementações do JS6/2015+ você consegue resultados tão bons quanto os que tem com o Jquery e a lib JQ também é bem pesada.

Se não tiver resolvido, continua chamando, a gente tá por aqui

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