When changing a certain status, it changes from all

Asked

Viewed 46 times

0

How can I make the user when clicking on Pending, the status change to Paid? Look at:

inserir a descrição da imagem aqui

I’m doing it this way:

PHP

    while($csClientes = mysqli_fetch_object($sqlClientes)){
            $visualizar .= "<tr>";
            $visualizar .= "<td style='font-weight: bold'><i class=\"fas fa-caret-right\"></i> ".$csClientes->NomeCompleto."</td>";
            $visualizar .= "<td style='text-align: center;'>R$ ".number_format($csClientes->ValorTotal,2,',','.')."</td>";
            $visualizar .= "<td style='text-align: center'><span class='status'><a href='#!' id='btnAlterar' data-id='".$csClientes->IdFinanceiro."' class='btn btn-danger btn-xs'>Pendente</a></span></td>";
            $visualizar .= "</tr>";
    }

In Jquery

<script>
$(document).on('click',"#btnAlterar", function(){
  var IdFinanceiro = $(this).attr('data-id');
    $.post('sistema/alterar-status.php', {key: IdFinanceiro}, function(retorno){
    if(retorno == 1){
      $(".status").html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-success btn-xs'>Pago</a>");
    }else{
      $(".status").html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-danger btn-xs'>Pendente</a>");
    }
    });
});
</script>

PHP that changes the status

$sql = mysqli_query($this->conexao,"UPDATE pagamentos SET StatusPagamento = 'P' WHERE IdPagamento = '".$_POST["key"]."';");
if(mysqli_affected_rows($this->conexao) > 0){
  echo '1';
}else{
  echo '0';
}

When I click on the Fernando Pessoa, it changes not only his, but also all.

inserir a descrição da imagem aqui

I tried that way too:

<script>
    $(document).on('click',"#btnAlterar", function(){
      var IdFinanceiro = $(this).attr('data-id');
        $.post('sistema/alterar-status.php', {key: IdFinanceiro}, function(retorno){
        if(retorno == 1){
           $("#statusPago").css('display','block');                             
           $("#statusAberto").css('display','none');
        }else{
           $("#statusAberto").css('display','block');
           $("#statusPago").css('display','none');
        }
        });
    });
    </script>

And in HTML 

   <td style='text-align: center'>
        <span id='statusAberto' style='display: block'><a href='#!' id='btnAlterar' data-id="<?php echo $csClientes->IdFinanceiro; ?>" class='btn btn-danger btn-xs'>Pendente</a></span>
        <span id='statusPago' style='display: none'><a href='#!' id='btnAlterar' data-id="<?php echo $csClientes->IdFinanceiro; ?>" class='btn btn-success btn-xs'>Pago</a></span>
  </td>

Only this time he changes the first and not the Fernando Pessoa when I click:

inserir a descrição da imagem aqui

jquery

  • Your problem is in the return. You are exchanging all the elements with the class .status

  • Hello Edson. I don’t have much experience with Jquery. Could you give me an example of how I could apply in the right way?

  • 2

    You can switch to $(that).parent(".status"), but to work must declare the that before the $.post() thus: var that = this, if you access this directly inside the return function it will not find

  • Perfect Edson. It worked. If you want, put as Reply that I accept. Thank you very much for the help!

  • I’ll add worth!

1 answer

1


Your problem is on the line $(".status").html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-success btn-xs'>Pago</a>");

In this line you add html to all page elements that have the class .status, to get around this you need to identify <a> which called the function and add the class in the .status in the father: $(that).parent(".status")

Remembering that you should declare a variable outside the $.post() so that the this can be accessed inside the callback: var that = this;

$(document).on('click',"#btnAlterar", function(){
  var that = this;
  var IdFinanceiro = $(this).attr('data-id');
    $.post('sistema/alterar-status.php', {key: IdFinanceiro}, function(retorno){
    if(retorno == 1){
      $(that).parent(".status").html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-success btn-xs'>Pago</a>");
    }else{
      $(that).parent(".status").html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-danger btn-xs'>Pendente</a>");
    }
    });
});

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.