Change status button

Question

Change status button

Navigation

#1 by (1 votes)

2

I have a code where the client clicks the button, it will activate or not a user, and of course, change the status in the database. So far so good. However, the code has two buttons, On and Off, and the Disable button is initially hidden by default. See below:

$('button#btn-cancelar').hide();

So in PHP I did it this way:

if($jmVagas->StatusVagas == 'A'){
  $botao = "$('button#btn-cancelar').hide();";
}if($jmVagas->StatusVagas == 'N'){
  $botao = "$('button#btn-salvar').hide();";
}

But when you click the button, it changes the status in the bank correctly, but the view appears the same in both. I'll post the code for you:

JQuery:

<script type="text/javascript">
    $(document).ready(function(){
  //   $('button#btn-cancelar').hide();
  <?php
  echo $visualizarVagas[1];
  ?>

        $('button#btn-salvar').click(function(){
            $('button#btn-salvar').hide();
          $('button#btn-cancelar').show();
          var valor = $(this).attr('value');
           $('button#btn-cancelar').text("Desativado").attr({
              title:"Desativado"
        });
        jQuery.ajax({
          url : "alterar.php?v=N&k="+valor,
          dataType : 'json',
          async : false,
          success : function(msg) {
          }
        });
        });
        $('button#btn-cancelar').click(function(){
            $('button#btn-salvar').show();
        $('button#btn-cancelar').hide();
        var valor = $(this).attr('value');
            $('button#btn-salvar').text("Ativado").attr({
                title:"Ativado"
            });
        jQuery.ajax({
          url : "alterar.php?v=A&k="+valor,
          dataType : 'json',
          async : false,
          success : function(msg) {
          }
        });
        });
    });
    </script>

PHP:

while(...){

    if($jmVagas->StatusVagas == 'A'){
      $botao = "$('button#btn-cancelar').hide();";
    }if($jmVagas->StatusVagas == 'N'){
      $botao = "$('button#btn-salvar').hide();";
    }

         $listar .= "<button class=\"btn btn-xs btn-primary\" id=\"btn-salvar\" value=\"".$jmVagas->IdVagas."\" title=\"Ativado\">Ativado</button>";
         $listar .= "<button class=\"btn btn-xs btn-danger\" id=\"btn-cancelar\" value=\"".$jmVagas->IdVagas."\" title=\"Desativado\">Desativado</button>";
}

php jquery

asked by anonymous 10.07.2015 / 17:14

1 answer

Setting value of the input file field Android List Element

score 1 · Accepted Answer

// Array Json exemplo de retorno do php
var myArray = [{
  "nome": "Gabriel",
  "senha": "123",
  "ativo": "Ativado"
}, {
  "nome": "Rodrigues",
  "senha": "1234",
  "ativo": "Desativado"
}, {
  "nome": "Fonseca",
  "senha": "98745",
  "ativo": "Ativado"
}];

// carrega os usuarios na tabela
var table = '';
$.each(myArray, function(key, val) {
  table += '<tr>';
  table += '<td>' + myArray[key].nome + '</td>';
  table += '<td>' + myArray[key].senha + '</td>';
  // verifica se o usuario em questão esta ativado ou não criando um botão para aciona-lo
  if (myArray[key].ativo === "Ativado") {
    table += '<td><button class="btn btn-success" name=' + myArray[key].nome + '>' + myArray[key].ativo + '</button></td>';
  } else {
    table += '<td><button class="btn btn-default" name=' + myArray[key].nome + '>' + myArray[key].ativo + '</button></td>';
  }
  table += '</tr>';
});
// preenche os usuarios dinamicamente na tabela
$("tbody").append(table);

// no click do botao pegar o nome do usuario e a acao dele.
$("button").click(function() {
  var nomeUsuario = $(this).attr("name");
  var acao = $(this).text();
  console.log(nomeUsuario);
  console.log(acao);
  // se o usuario estiver ativo, desative ele, você precisa adicionar um ajax para enviar a acao para o php, pode ser um update where cliente = nomeUsuario.
  if (acao === "Ativado") {
    $(this).text("Desativado").removeClass("btn-success").addClass("btn-default");
  } else {
    $(this).text("Ativado").removeClass("btn-default").addClass("btn-success");
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Senha</th>
      <th>Ativo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

The logic is there, you just need to adapt to your problem and put an ajax to change the status in the database.