How to make your on/OFF button work in bootstrap?

Question

1.00/5 (1 vote)

See more:

I cant figure it out as to why my buttons are not working. When using bootstrap switch, below is the code i have o maybe i am using 2 libraries on my javascript.

What I have tried:

JavaScript

<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript"><div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-info locked_active">OFF</button>
 <button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
 </div>

<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">

   $('#toggle_event_editing button').click(function(){
	if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')){
		/* code to do when unlocking */
        $('#switch_status').html('Switched on.');
	}else{
		/* code to do when locking */
        $('#switch_status').html('Switched off.');
	}
	
	/* reverse locking status */
	$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
	$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>

Posted 26-Nov-19 20:19pm

gcogco10

Updated 27-Nov-19 1:28am

Add a Solution

Comments

Afzaal Ahmad Zeeshan 27-Nov-19 2:36am

What is the problem that you are facing?

Check the browser console to find any issues or errors.

gcogco10 27-Nov-19 2:40am

There are no errors apparently, so i dont follow and did use inspect element.

gcogco10 27-Nov-19 5:25am

Does any mate experience same response when using this code i provided?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

gcogco10 · Answer 1 · 2019-11-27T01:28:00

Solution 1

I apparently the issue was on the load document, i did not declare it on top.

$(document).ready(function(){
// my logic here.

});
NB: Jfiddle comes with the load document, unlike when a developer uses normal benchmark the browser will read this and tell you on your console. Its good to test different tools using the same scenario, thanks mate.

Posted 27-Nov-19 1:28am

gcogco10

Comments

Richard Deeming 27-Nov-19 13:05pm

NB: You should read the comments in the jQuery documentation:
.ready() | jQuery API Documentation[^]

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
* $( handler )
* $( document ).ready( handler )
...
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

So instead of $(document).ready(function(){ ... });, you should always use $(function(){ ... });