$ () Ajax event does not work

Question

$ () Ajax event does not work

Navigation

#1 by (3 votes)

0

I have a problem with the $().click() event of Ajax.

I'm trying to send an HTML table to convert to JSON and so send it to PHP. But when I click the button to pick up the event, nothing happens. Even an error occurs on the console. The table is as follows:

<table id="tabela">
<thead></thead>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Disciplina: GCC209 - Programação WEB"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Docente Principal: RAMOM GOMES COSTA"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Docente Responsável: RAMOM GOMES COSTA"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Turma: 10A     Versão do Plano: 1ª"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Carga Horária Teórica: 0     Carga Horária Prática: 68"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Atividades Avaliativas: Prova 1: 20%; Prova 2: 20%; Exercícios: 20%; Seminários: 20%; Trabalho Final: 20%"></td>
    </tr>
    <tr class="corpo">
        <td colspan="4"><input type="text" class = "headerInput" value="Estratégia..."></td>
    </tr>
    <colgroup span="4">
        <tr>
            <th class="Dia1">Dia</th>
            <th class="Data1">Data</th>
            <th class="Descricao1">Descrição</th>
            <th class="Dia1"></th>
        </tr>
        <tr>
            <td class="lastLine"></td>
            <td class="lastLine"></td>
            <td class="lastLine"></td>
            <td class="lastLine"></td>
        </tr>
    </colgroup>
</table>

<div class="adiciona">
    <button class="botao" onclick="start()">Adicionar</button>
    <button class="botao" id="converter-tabela">Salvar</button>
</div>

And my script looks like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js"></script><scripttype="text/javascript">
    $('#converter-tabela').click( function(){
        //alert("chegou!");    
        var table = $('#tabela').tableToJSON();
        console.log(table);
        alert(JSON.stringify(table)); 
        // Você envia os dados para o PHP utilizando AJAX
        $.ajax({
            // Enviamos os dados da tabela para um script PHP
            url: 'teste.php'
            , data: { dados_tabela: table }
            , method: 'POST'
        }).then(function(result) {
        // No retorno, apenas confirmamos
            if (result.success) {
                alert('Enviado para o servidor com sucesso!');
            }
        });
    });
</script>

javascript html ajax json

asked by anonymous 04.07.2018 / 15:17

1 answer

How to enable autocomplete feature for shell script? C - how to calculate the factorial of a number? [duplicate]

score 3 · Accepted Answer

The problem is that the first line of this code will look for $('#converter-tabela') that has not yet been read by the browser.

The browser needs to read HTML first, or you have to have a function that only runs when the page gives the signal (event) that it is ready.

You can make the second alternative with:

$(function(){
   // o código aqui dentro correrá quando a página tiver carregado
   $('#converter-tabela')...
   // ...etc
});