1

A ideia é clicar no botão válidar ou inválidar e atualizar aquela linha na table, alterando a classe do botão para a respectiva situação class: valido ou class: invalido com ajax.

Minha dificuldade é como tratar os dados do response no e atualizar a linha do HTML .

Script

$.ajax({
  url: "updateTelefone.php
  type: 'get',
  dataType: 'json',
  data: {

  },
  success: function(response) {

  }


}


});

HTML

<table class="table">
  <thead>
    <tr>
      <th>codigo</th>
      <th>descricao</th>
      <th>Ação</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>11 5589-0000</td>
      <td>
        <button id="valido" class="sem-validacao">Válido</button>
        <button id="invalido" class="sem-validacao">Inválido</button>
      </td>
    </tr>
  </tbody>
</table>

2 Respostas 2

3

O response vai trazer o os dados de retorno do get na url updateTelefone.php, como vi que o dataType: é json então o retorno vai vir nesse formato.

Quando o request acontece sem erros ele vai chamar como callback a função que você passar no success, caso você queira ter o callback em caso de erro, você deve adicionar uma função para a propriedade error.

Para detalhar melhor a resposta precisaria saber como seria o retorno, mas vou colocar um exemplo aqui.

ex: Vamos supor que o retorno seria {OK:true} para o caso de válido e {OK:false} para inválido.

if(response.OK) {
     $("#valido").show();
     $("#invalido").hide();
}
else {
     $("#valido").hide();
     $("#invalido").show();
}

edit 1:

se deseja atualizar todos os dados da tabela você poderia fazer assim:

success: function(response) {
    var html = '';

    for(var index in response) {
        html += '<tr>'
                   +'<td>'+response[index].ID+'</td>'
                   +'<td>'+response[index].DESCRICAO+'</td>'
                   +'<td>'
                        +(response[index].VALIDO ? 
                          '<button id="valido" class="sem-validacao">Válido</button>'
                        :
                        'button id="invalido" class="sem-validacao">Inválido</button>')
                  +'</td>'
              +'</tr>'
    }  

   $('tabela tbody').html(html);
}
7
  • Obrigado pela explanação, mas no caso minha dificulde é exatamente de pegar o response e recriar a table no html com os dados atualizado e as linhas com suas respectivas classes valido invalido Commented 17/10/2019 às 3:14
  • Você quer atualizar todas as linhas da tabela ou apenas a linha que você está clicando? Qual seria o retorno da url 'updateTelefone.php'?
    – matmartino
    Commented 17/10/2019 às 3:17
  • A query retornada seria todos os telefones com ID, Descricao e o button com a classe valido ou invalido. Sendo que válido é verde e inválido vermeho. Commented 17/10/2019 às 3:21
  • Não sei se o ajax atualiza apenas uma linha, por isso penso que terá que retornar a query completa daquele cliente e com javascript renderizar a tabela com os dados do response. Commented 17/10/2019 às 3:22
  • Editei para atualizar a tabela toda, considerando os dados que você falou.
    – matmartino
    Commented 17/10/2019 às 3:34
2

Pelo que entendi, você só quer alterar a classe do botão clicado após o retorno do AJAX, então não precisa receber nenhum retorno response. A única coisa que você precisa enviar no AJAX é o id da linha (que suponho ser a coluna código da tabela, que é a primeira td.) e uma informação se é "válido" ou "inválido".

Primeiro que você não deve colocar id="valido" e id="invalido" nos botões, porque você teria que repetir essas id's nos outros botões das outras linhas, e repetir id é incorreto no HTML. Então não as use. Em vez disso, acrescente uma classe apenas nos botões "Válido", para diferenciar dos botões "Inválido". Eu coloquei a classe .val, ficando assim:

                ↓
<button class="val sem-validacao">Válido</button>
<button class="sem-validacao">Inválido</button>

Como você não irá precisar de nenhum dado retornado do AJAX, não precisa colocar response na função do success, e não precisa também da opção dataType: 'json',. Também não precisa colocar type: 'get',, pois o type do $.ajax já é get por padrão.

Basta então, após o AJAX ser concluído (função do success) verificar se o botão clicado possui a classe .val, para inserir nele a classe .valido ou .invalido.

O código irá ficar desta forma (veja comentários explicativos):

// pega o click nos botões pela classe .sem-validacao
$(".sem-validacao").on("click", function(){

   var $this = $(this); // variável para guardar o botão clicado

   // variável que irá ser "true" se o botão clicado tiver a classe .val
   // ou "false" se não tiver
   var valido = $this.hasClass("val");

   $.ajax({
      url: "updateTelefone.php",
      data: {
         id: $this         // botão clicado
            .closest("tr") // pega a linha do botão
            .find("td")    // busca uma coluna
            .first()       // a primeira coluna
            .text()        // pega o texto da coluna
            .trim(),       // remove espaços

         v: valido         // envia "true" ou "false"
      },
      success: function(){
         $this // botão clicado
         .addClass( valido ? "valido" : "invalido" ); // adiciona uma das classes
      }
   });
});

Repare que o AJAX envia duas variáveis para o PHP: id e v (essas variáveis você pode nomear como quiser). No PHP você irá pegar ambas com $_GET['id'] e $_GET['v'].

O $_GET['id'] será a id do telefone, e o $_GET['v'] será true ou false, que você precisará como informação para atualizar o banco de dados.

1
  • Sam, fico muito agradecido pela dica. Adequei seu código a minha necessidade e deu certo. Commented 17/10/2019 às 20:10

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 .