Button problem

Asked

Viewed 34 times

-1

I have two Uttons, one to activate category and one to disable, each with its layout. I need to switch between the two, when one activates, it changes in the bank to activated and is being displayed while the other does not appear and vice versa. However I am not understanding the logic of how to do this. I know it is with ajax, for an alteration.php for example.

<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>

Someone can give a boost?

2 answers

0

Create a class in css to hide button:

.isHidden{ display: none}

Add a class to identify the Uttons:

Example:

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

Like Ajax, check if the category is active, if it is not, you go to button and hide him. Example:

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

If the category is active, you remove the class:

$(".button-active").removeClass('isHidden');
  • right, but to do this check in the database first before changing?

  • I built it right in php and it changes but it gives refresh on the page, so I want in ajax

  • Just check if the category is active with Ajax. This site shows how to use Ajax: http://api.jquery.com/jquery.ajax/. With the return of the Ajax query you decide what to do with the button, as I put above.

  • OK, I’ll try here, thank you

0

Using Jquery can use the method .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>

Browser other questions tagged

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