Add table with AJAX

Asked

Viewed 88 times

-1

Good morning I need help in this script. That when selecting an option in select is placed dynamically data in the table. But I don’t know how to return the html tags to the source page. On the save.php page you will do a whole database processing and thus generate the table with the tasks related to each employee.

I hope I’ve been clear. Thanks in advance

var select = document.querySelector('select#funcBusca')
select.addEventListener('change', function() {
  $(function() {
    
    $('#funcBusca').click(function(e) {

     
      e.preventDefault();

      
      var id = $('#funcBusca').val();

      
      $.post('salvar.php', {
        id: id
      }, function(resposta) {
        
        if (resposta == 1) {
          alert(OK)
        } else {
          alert(resposta);
        }
      });

    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Por Funcionário:
<select name="filtro_func" onchange="" id="funcBusca">
  <option value="0">Todos</option>
  <option value="1">Fulano</option>
  <option value="0">Ciclano</option>
  <option value="1">Beltrano</option>

</select>
<section id="secao">
  <p class="title" data-section-title>
    <a href="#">Tarefas Cadastradas</a>
  </p>
  <div class="content" data-section-content>
    <table class="responsive" width="100%" id="tarefas_cadastradas">
      <thead>
        <tr>
          <th width="15%">A Tarefa</th>
          <th width="15%">Funcionário</th>
          <th width="15%">Setor</th>
          <th width="5%">Status</th>
          <th width="10%" style="text-align:center;">Prazo</th>
          <th width="10%">Nível Urgência</th>
          <th width="10%">Dia Fechamento</th>
          <th width="7%" style="text-align:center;">Editar</th>
          <th width="7%" style="text-align:center;">Excluir</th>
        </tr>
      </thead>
      <tbody>
        <!--colocar linhas aqui -->
      </tbody>
    </table>

1 answer

0

From what I understand you want to add the content returned by the Ajax request in the table. As I saw that you are using jquery on the page I made some adjustments in creating the event using it. I put an example of how to add the answer data in the table.

$("#funcBusca").on("change", function() {
    var id = $('#funcBusca').val();

     $.post('salvar.php', 
           {id: id}, 
           function(resposta) {
                var html = '<tr>'
                             +'<td>Tarefa 1</td>'
                             +'<td>Funcionário 1</td>'
                             +'<td>Setor 1</td>'
                             +'<td>Status 1</td>'
                             +'<td>Prazo 1</td>'
                             +'<td>Nível Urgência 1</td>'
                             +'<td>Dia Fechamento</td>'
                             +'<td>1</td>'
                             +'<td>1</td>';
                          +'</tr>';                 

                //adicionar o conteúodo no tbody
                $("#tarefas_cadastradas tbody").html(html);                             
           }
    );

});

Browser other questions tagged

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