Ajax $()click event does not work

Asked

Viewed 36 times

0

I have a problem at the event $().click() ajax.

I’m trying to send an HTML table to convert to JSON and send it to PHP. However, when I click on the button to grab the event, nothing happens. Nor does an error occur in 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 is as follows:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js"></script>
<script type="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
  • 1

    Is your jQuery code before the right HTML? switch to the end of body

  • Sergio, it worked. However, I have a question. I am filling this table via Javascript. When you arrive at the Alert(JSON.stringify(table)) line, only the empty table appears. What can I do? Sorry, I’m inexperienced.

  • And the console.log(table); works?

  • Yes, but with an empty array. But returns with the right number of rows.

  • That’s the plugin’s problem. You have a link to the documentation?

  • Are you saying in Ajax and/or JSON realation? If yes, these are the links (Ajax) https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js JSON( https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js)

  • Your table formatting is not correct. You do not have tbody and the thead is empty.

  • Got it, believe me if I format the table correctly, I could get the data right?

  • Yes and no, your table has inputYeah, that changes things a little. The documentation shows examples of how to use a function to extract data: https://github.com/lightswitch05/table-to-json#options if you can’t ask a separate question to help you

  • Okay, thank you very much!

Show 5 more comments

1 answer

3


The problem is that the first line of this code will look $('#converter-tabela') which 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 sign (event) that it’s ready.

You can do the second alternative with:

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

Browser other questions tagged javascript html ajax json

You are not signed in. Login or sign up in order to post.