Asynchronous request to return the updated table

Question

I’m using an asynchronous request to return the updated table and replace the previous one, but I’m having trouble showing the data.

Code with my table:

<div id="spoiler" style="display: none;">
<table class="table table-responsive" id="employee_table"> 
<h1 style="font-size: 30px"><strong>Saída de Luvas</strong></h1>
<thead>  
<tr> 
<th>Colaborador</th>
<th>Tipo Luva</th>
<th>Tamanho</th>
<th>Estado</th>
<th>Ação</th>   
<th>Eliminar</th>                               
</tr> 
</thead>
<tbody>
<tr>
<?php  do{ ?>  
<td><?php echo $produto["nome"]; ?></td> 
<td><?php echo $produto["Tipo"]; ?></td> 
<td><?php echo $produto["Tamanho"]; ?></td>
<td><?php echo $produto["Estado"]; ?></td>
td><button type="button" name="edit" id="<?php echo $produto["Id"]; ?>" data-toggle="modal" href="#add_data_Modal" class="btn btn-warning btn-sm edit_data" /><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button type="button" id="<?php echo $produto["Id"]; ?>" class="btn btn-dander btn-sm delete" onclick="remove(this)"/><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>  
<?php } while($produto = $result->fetch_assoc()); ?>
</tbody>      
</table>   
</div>

Js:

function inserir_registo()
{  

    var dadosajax = {
        'Id' : $("#Id").val(),
        'TipoLuvas' : $("#TipoLuvas").val(),
        'Tamanho' : $("#Tamanho").val(),
        'Quantidade' : $("#Quantidade").val(),
        'Observacao1' : $("#Observacao1").val(),
        'Estado' : $("#Estado").val()
    };
    $.ajax({
        url: './atribuicaoluvas',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
         (function ($) {$(document).ready(function () {
          $('#add_data_Modal').modal('hide');
         });       
         })(jQuery);  
        $.ajax({
             //link o arquivo php que fará a consulta para atualizar a tabela
             url: './atualizarluvas',
             type: 'get',
             success: function(data){
                 $("#employee_table").empty();
                 $("#employee_table").append(data);
              }
          });
      }     
   });
}

The archive atualizarluvas is what I use to update the table:

$query = "SELECT raddb.RequisicaoLuvas.Id, nome, Tipo, raddb.TamanhoLuvas.Tamanho, Quantidade, Observacao, DataRequis, raddb.Status.Estado 

FROM raddb.RequisicaoLuvas LEFT OUTER JOIN raddb.TipoLuvas

ON raddb.TipoLuvas.Id = raddb.RequisicaoLuvas.TipoLuvas LEFT OUTER JOIN raddb.TamanhoLuvas

ON raddb.TamanhoLuvas.Id = raddb.RequisicaoLuvas.Tamanho LEFT OUTER JOIN raddb.usuarios

ON raddb.usuarios.id = raddb.RequisicaoLuvas.Colaborador LEFT OUTER JOIN raddb.Status

ON raddb.Status.Id = raddb.RequisicaoLuvas.Estado WHERE raddb.Status.Estado = 'Pendente'";  
      $result = mysqli_query($conn, $query);
      $row = mysqli_fetch_array($result);  
      echo json_encode($row);  

But when I edit and write, it shows the updated table:

But it should show the result as follows:

Answer 1

You need to assemble the table row and insert into the tbody. The way you’re doing, you’re just inserting the JSON return in string form into the whole table.

The selector is incorrect. Instead of $("#employee_table") should be $("#employee_table tbody"), because the target is tbody.

Use dataType: "json", in AJAX so that the return is in JSON object form and not a JSON string.

In the success you can build a line using strings template, taking the JSON values returned:

var linha = `<tr>
<td>${ data.nome }</td> 
<td>${ data.Tipo }</td> 
<td>${ data.Tamanho }</td>
<td>${ data.Estado }</td>
<td><button type="button" name="edit" id="${ data.Id }" data-toggle="modal" href="#add_data_Modal" class="btn btn-warning btn-sm edit_data" /><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button type="button" id="${ data.Id }" class="btn btn-dander btn-sm delete" onclick="remove(this)"/><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>`;
$("#employee_table tbody").html(linha);