-1

Tenho dois buttons, um para ativar categoria e outro pra desativar, cada um com seu layout. Preciso alternar entre os dois, quando um ativa, ele muda no banco pra ativado e fica sendo exibido enquanto o outro não aparece e vice versa. Porem não estou entendendo a logica de como fazer isso. Sei que é com ajax, pra um altera.php por exemplo.

<button class="on-default remove-row text-warning"><i=class="fa fa-thumbs-o-down"><i></button>

<button class="on-default remove-row text-success"><i=class="fa fa-thumbs-o-up"><i></button>

Alguém pode dar uma força?

2 Respostas 2

0

Crie uma class no css para esconder o button:

.isHidden{ display: none}

Adicione uma class para identificar os buttons:

Exemplo:

<button class="button-active on-default remove-row text-warning"><i=class=" fa fa-thumbs-o-down"><i></button>

Como o Ajax, verifique se a categoria está ativa, se não estiver, você vai no button e esconde ele. Exemplo:

$(".button-active").addClass('isHidden');

Caso a categoria esteja ativa, você remove a class:

$(".button-active").removeClass('isHidden');
4
  • certo, mas pra fazer isso verificar no banco de dados primeiro antes de alterar? 29/10/2018 às 15:18
  • eu montei certinho no php e ele altera mas ele dá refresh na pagina, por isso quero no ajax 29/10/2018 às 15:19
  • Basta verificar se a categoria está ativa com o Ajax. Esse site mostra como usar o Ajax: api.jquery.com/jquery.ajax. Com o retorno da consulta Ajax você decide o que fazer com o button, conforme coloquei acima.
    – Lindomar
    29/10/2018 às 15:35
  • certo, vou tentar aqui, obrigado 29/10/2018 às 15:53
0

Usando Jquery pode usar o metodo .toggle() :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button style="display:block;" onclick="toggle_button()" class="on-default remove-row text-warning" id="bon">ON</button>
<button style="display:none;" onclick="toggle_button()" class="on-default remove-row text-success" id="boff">OFF</button>

<script>

function toggle_button(val) {
    $('#bon').toggle();
    $('#boff').toggle();
}

</script>

function toggle_button(val) {
	$('#bon').toggle();
	$('#boff').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="display:block;" onclick="toggle_button()" class="on-default remove-row text-warning" id="bon">ON</button>
<button style="display:none;" onclick="toggle_button()" class="on-default remove-row text-success" id="boff">OFF</button>

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 .