How to trigger Bootstrap in our javascript

Question

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

Here they given an demo for radio button toggling in bootsrtap..

I am trying to use that in my code...but the active is not switching what is the problem...

my cdns

enter code here

<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

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

button toggle is for single button , not button group with inputs jsfiddle.net/79ov9agq/7 — Arun_SE
– Arun_SE, Commented Sep 8, 2014 at 8:04

Dave Boyne · Accepted Answer · 2014-09-09 07:35:44Z

Your JavaScript is included in the wrong order.

Bootstrap has a dependency on jQuery. Make sure you define that first.

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>

Ilya Klementiev · Accepted Answer · 2014-09-08 08:25:04Z

I think that you have problem with jquery.

See sample here http://jsfiddle.net/iklementiev/rt95u7xL/2/

I include jquery 1.11.0

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

Thanks I found the problem...Dave Boyne answer rectified my code.

George G · Accepted Answer · 2014-09-08 08:13:38Z

0

You are toggling all of the buttons, so last one gets activated in your case...

It's working, without toggle param. See this: http://jsfiddle.net/g2L8ujt7/1/

If you try to activate for example second radio button programmatically you can do this:

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

See I give second radio button tgl class (unique, to differentiate it from others)

so now you can toggle this one only:

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

last example: http://jsfiddle.net/g2L8ujt7/2/

P.S. if you want to select multiple you have to use checkbox buttons not radios, simply to say the difference: checkboxes mean as many choice as you wish, while radios is good to have single choice from many

answered Sep 8, 2014 at 8:13

George G

7,72512 gold badges48 silver badges62 bronze badges

1 Comment

johnie Over a year ago

Thanks I found the problem...Dave Boyne answer rectified my code.

Collectives™ on Stack Overflow

How to trigger Bootstrap in our javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related