Update table after closing modal

Question

I have my table this way:

<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>

When I click on the edit button and then click on the record button I use the following 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);  
                    }
    });
}

I intend after closing the modal within the success update the table automatically and I’m not getting it.

I’m trying this way, but it doesn’t work:

$("#employee_table").table("refresh");

What changes the table is this query:

$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 = $conn->query($query) or die($conn->error);

$produto = $result->fetch_assoc();

Because when I edit I change the status of pending to delivered and when changing I should leave the line that was edited.

Answer 1

While not the best course of action, I will leave this answer as a warning to a next question. Nowhere in your code is there anything that changes your table, as you think it should work for your table to be automatically updated?

It is obvious that you need to refresh the information, but from what I understand you do not want to refresh the page, so what we have left is ajax. Soon you should perform your asynchronous request that returns the updated table, and replace the previous one.

Following example:

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)
            { 
                /*
                Caso sua insersão funcione
                Faça um ajax que realize a consulta no banco que trará a tabela atualizada e depois com JS substitua o conteúdo da antiga pela nova tabela
                */
                $.ajax({
                    //link o arquivo php que fará a consulta
                    url: 'link/para/arquivo/php',
                    type: 'get',
                    success: function(data){
                        $("#spoiler").empty();
                        $("#spoiler").append(data);
                    }
                });
            }
            $('#add_data_Modal').modal('hide');
        });
    }