0

Tenho a minha tabela desta forma:

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

Quando clico no botão editar e depois clico no botão gravar utilizo o seguinte 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);  
                    }
    });
}

Pretendo depois de fechar o modal dentro do success atualizar a tabela automaticamente e não estou a conseguir.

Estou a tentar desta forma, mas não funciona:

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

O que muda a na tabela é esta 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();

Porque quando edito altero o estado de pendente para entregue e ao mudar devia sair a linha que foi editada.

3
  • Porque é que tens .ready() dentro desse success? Só devias ter $('#add_data_Modal').modal('hide');. E quando dizes "atualizar a tabela automaticamente" o que esperas que aconteça? Não vejo código que mude a tabela...
    – Sergio
    14/08/2019 às 16:19
  • @Sergio editei a pergunta com o código que estava em falta
    – Bruno
    14/08/2019 às 16:35
  • @Bruno, você deve realizar uma requisição ajax que substitua sua tabela atual por uma tabela atualizada 14/08/2019 às 16:37

1 Resposta 1

1

Apesar de não ser a melhor atitude, vou deixar esta resposta como um aviso para uma próxima pergunta. Em nenhuma parte do seu código há algo que altere sua tabela, como você acha que deveria funcionar para que sua tabela fosse atualizada automaticamente?

É obvio que você precisa dar um refresh nas informações, mas pelo que entendi vc não quer dar um refresh na página, então o que nos sobra é o ajax. Logo você deveria realizar ua requisição assíncrona que retorne a tabela atualizada, e substitua a anterior.

Segue exemplo:

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');
        });
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .