Atualizando o atributo de dados após a chamada ajax

Eu tenho uma página que lista um número de trabalhos, cada trabalho tem um botão para pagar e o botão tem um atributo pago por dados que contém o valor de se é pago ou não.

Quando o botão é clicado, envio uma solicitação para a minha rota que atualiza o pagamento e retorna o sucesso junto com o status, se é pago ou não.

Veja meu botão.

 

Quando clicado

 $('button.paid').on('click', function() { var job = this; var id = $(this).data("id"); $.get('/round/job/' + id + '/paid', function(data){ $(job).data('paid',data.jh.paid); console.log(data.jh.paid); }); }); 

Ao olhar para o console, se paga a rota retorna 1, se não paga, retorna 0.

Desejo atualizar o atributo de pagamento pago contra o botão com o valor de 1 ou 0.

Eu pensei que function faria isso, mas não atualiza o valor que permanece no valor quando a página é carregada.

data não são um acessador para atributos data-* , são mais e menos que isso. data gerenciam o cache de dados do jQuery para o elemento, que é inicializado apenas a partir dos atributos data-* . Nunca escreve para eles.

Para realmente alterar o valor do atributo, use attr , não data:

 $(job).attr("data-paid", dta.jh.paid); 

Obviamente, se você usar data todo o seu código e não se importar com o valor real do atributo, exceto como ponto de partida, os data estarão bem, mas não espere que o valor do atributo seja alterado quando você alterar o valor dos dados.

O outro lado é que, se você não precisa dos resources adicionais fornecidos pelos data , basta usar attr .

Exemplo:

 // Get the element var t = $("#target"); // See what its data value for "foo" is console.log("Before: t.data('foo') = " + t.data('foo')); // See what its *attribute* is console.log("Before: t.attr('data-foo') = " + t.attr('data-foo')); // Change it t.data('foo', 'updated'); // See what its data value for "foo" is again console.log("After: t.data('foo') = " + t.data('foo')); // See what its *attribute* is again: console.log("After: t.attr('data-foo') = " + t.attr('data-foo')); 
 

dados e atributos de dados não são os mesmos. Se você quiser atualizar o atributo, faça o seguinte:

 $('button.paid').on('click', function() { var job = this; var id = $(this).data("id"); $.get('/round/job/' + id + '/paid', function(data){ $(job).attr('data-paid', data.jh.paid); console.log(data.jh.paid); }); });