CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
johnie
johnie

Reputation: 123

How to trigger Bootstrap in our javascript

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>

Upvotes: 2

Views: 182

Answers (3)

Dave Boyne
Dave Boyne

Reputation: 46

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>

Upvotes: 3

Ilya Klementiev
Ilya Klementiev

Reputation: 593

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>

Upvotes: 1

George G
George G

Reputation: 7695

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

Upvotes: 0

Related Questions