Ways to activate Bootstrap using our javascript

Question

Ways to activate Bootstrap using our javascript

http://getbootstrap.com/javascript/#buttons?

They have provided a demo for radio button toggling in Bootstrap.

I attempted to implement it in my code, but the active state is not switching. What could be causing this issue?

CDNs I am using:

Code input section:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

My script:

$(document).ready(function() {
    $('.btn').button('toggle')
});

My code snippet:

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Your JavaScript should be included in the correct order.

Remember that Bootstrap relies on jQuery, so ensure you define it first.

For example: http://jsbin.com/citizeqecupi/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script>
    $(document).ready(function() {
      $('.btn').button()
    });

  </script>

</head>
<body>

  <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

</body>
</html>

Answer 2

Your JavaScript should be included in the correct order.

Remember that Bootstrap relies on jQuery, so ensure you define it first.

For example: http://jsbin.com/citizeqecupi/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script>
    $(document).ready(function() {
      $('.btn').button()
    });

  </script>

</head>
<body>

  <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

</body>
</html>

Answer 3

Answer №2

It appears that there may be an issue with jQuery in your code.

You can view a sample here.

I have included jQuery version 1.11.0 in the script.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo by iklementiev</title>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>        
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style type="text/css">        
      </style>
      <script type="text/javascript">
         $(window).load(function(){
         $(document).ready(function() {
             $('.btn').button('toggle')
         });
         });         
      </script>
   </head>
   <body>
      <div class="btn-group" data-toggle="buttons">
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option" value="a" checked=""> Option 1 (preselected)
         </label>
         <label class="btn btn-primary">
         <input type="radio" name="options" id="options" value="b"> Option 2
         </label>
         <label class="btn btn-primary active">
         <input type="radio" name="options" id="optionsa" value="c"> Option 3
         </label>
      </div>
   </body>
</html>

Answer 4

It appears that there may be an issue with jQuery in your code.

You can view a sample here.

I have included jQuery version 1.11.0 in the script.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo by iklementiev</title>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>        
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style type="text/css">        
      </style>
      <script type="text/javascript">
         $(window).load(function(){
         $(document).ready(function() {
             $('.btn').button('toggle')
         });
         });         
      </script>
   </head>
   <body>
      <div class="btn-group" data-toggle="buttons">
         <label class="btn btn-primary">
         <input type="radio" name="options" id="option" value="a" checked=""> Option 1 (preselected)
         </label>
         <label class="btn btn-primary">
         <input type="radio" name="options" id="options" value="b"> Option 2
         </label>
         <label class="btn btn-primary active">
         <input type="radio" name="options" id="optionsa" value="c"> Option 3
         </label>
      </div>
   </body>
</html>

Answer 5

Answer №3

When toggling all of the buttons, the last one will be activated in your situation...

The functionality works even without the toggle parameter. You can see it in action here: http://jsfiddle.net/g2L8ujt7/1/

If you want to programmatically activate the second radio button for example, you can do so by adding a unique class to differentiate it:


...
<label class="btn btn-primary tgl">
     <input type="radio" name="options" id="options" value="b"> Option 2
</label>
...

In this case, I've added the class tgl to the second radio button

Now you can toggle only this specific button using the following code:

$('.tgl').button('toggle');

For another example, you can check out: http://jsfiddle.net/g2L8ujt7/2/

P.S. If you need to select multiple options, use checkbox buttons instead of radios. Checkboxes allow for multiple choices, while radios are used for selecting only one option from many.

Answer 6

When toggling all of the buttons, the last one will be activated in your situation...

The functionality works even without the toggle parameter. You can see it in action here: http://jsfiddle.net/g2L8ujt7/1/

If you want to programmatically activate the second radio button for example, you can do so by adding a unique class to differentiate it:


...
<label class="btn btn-primary tgl">
     <input type="radio" name="options" id="options" value="b"> Option 2
</label>
...

In this case, I've added the class tgl to the second radio button

Now you can toggle only this specific button using the following code:

$('.tgl').button('toggle');

For another example, you can check out: http://jsfiddle.net/g2L8ujt7/2/

P.S. If you need to select multiple options, use checkbox buttons instead of radios. Checkboxes allow for multiple choices, while radios are used for selecting only one option from many.

Ways to activate Bootstrap using our javascript

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery, you can add a class to a div by clicking on an element, and then remove that class by clicking away from

Adding special characters (č,š and ž) to a MySQL database

Exploring the wonders of ASP.NET MVC 3 through RESTful routing techniques

Is it possible to include a border/stroke on a Raphael picture?

Ways to update or migrate the schema of a remote client's standalone database when performing updates

The function Waterline.create() is not available

Choosing an option in a dropdown menu during ProtractorJS end-to-end testing

Arrange an array by the occurrence rate of its elements within objects contained in another array, using Javascript

Varied elevations dependent on specific screen dimensions

What methods can be used to determine if a bound function is equal when performing unit testing?

Move to the following <article>

What's the best way to test a simple Bearer Strategy implementation in Passport.js using Postman?

What is the best way to accurately determine the height and offset values of an element while utilizing ng-repeat?

Passing data between Express controllers using Socket.io

Invoking a function within an HTML file does not result in triggering an alert message

Running jQuery code within an AngularJS directive's templateUrl

String passed instead of JSON in Ext JS grid sorting

Duplicate the PHP code for every section found within an INI file

Chat Bot - EmbedMessage

Issue with Angular: Problems with script references