0

Tenho uma página de cadastro e logo abaixo do formulário tenho uma tabela que mostra os registros cadastrados. Essa tabela HTML é montada com os dados cadastrados usando JSON via jQuery. Até nesse ponto funciona perfeitamente, mas o que eu preciso é que a cada registro cadastrado seja atualizado nessa tabela HTML abaixo do formulário apenas o registro que foi cadastrado naquele momento e mantendo os outros que já estavam. Mas quando eu faço isso ele mostra o registro atual que cadastrei, mas ele duplica todos os outros registros cadastrados. Como posso resolver isso?

       jsonTreatments();

    $("form[name='form_register_treatment']").on('submit', function( event ) { 
        event.preventDefault();
        $.ajax({
        url: "http://...",
        type: "POST",
        dataType: "json",
        data: $( this ).serialize()
        }).done(function( register ){
            if( register.verified === 'registered' ){             
                swal( "Sucesso!", register.message , "success" );
                jsonTreatments();
            }else{
                swal( "Erro!", register.message , "error" );
            }
        });
        return false;
    }); 

    function jsonTreatments(){
        $.getJSON( "http://...", 
            {id : 7 }, function( treatment ){        
              var itens = "";
              $.each(treatment, function( key, val){
                  itens += "<tr>";
                  itens += "<td>" + val.treatment_date_register + "</td>";
                  itens += "<td>" + val.treatment_procedure + " <br> <small class'text-primary'>"+ val.treatment_covenant + "</small></td>";
                  itens += "<td>" + val.treatment_teeth + "</td>";
                  itens += "<td>" + val.treatment_faces + "</td>";
                  itens += '<td> <button class="btn btn-default btn-circle btn-sm"><i class="fa fa-check"></i></button> <button class="btn btn-danger btn-circle btn-sm"><i class="fa fa-trash"></i></button> </td>';
                  itens += "</tr>";
              }) 
              $('#treatments_patient').append( itens );
        });
    }


                    <table class="table color-table info-table">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Procedimento</th>
                            <th>Dente(s)</th>
                            <th>Faces</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody id="treatments_patient">

                    </tbody>
                </table>
2
  • Na função jsonTreatments está vindo só o de ID 7 mesmo ou todos? Commented 14/03/2019 às 20:52
  • Somente do usuário com ID 7 Commented 15/03/2019 às 12:02

1 Resposta 1

2

Você chama a função jsonTreatments() no carregamento e monta a tabela. Depois no primeiro Ajax você chama a função novamente fazendo um .append() com os mesmos dados vindos do segundo Ajax, com isso alimentando a tabela com os valores que já estavam lá.

A forma de resolver é esvaziar a tabela antes do append. Você resolve isso com o método .empty() antes do .append():

$('#treatments_patient').empty().append( itens );
4
  • Obrigado Sam, deu certo! Commented 15/03/2019 às 12:07
  • na função jsonTreatments, tem a última TD onde tem ações de checar e deletar, mas não estou conseguindo o jquery não encontra as TRs da tabela não ficam visíveis no DOM, devido a iteração feita pelo próprio jquery, como posso resolver isso? Commented 15/03/2019 às 12:41
  • Veja se é isto: pt.stackoverflow.com/a/274000/8063
    – Sam
    Commented 15/03/2019 às 13:45
  • 1
    Estava usando a class no lugar do document e esse exemplo que me passou funcionou perfeitamente. Obrigado novamente @Sam Commented 15/03/2019 às 14:04

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 .