Home/ Questions/Q 9312849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T01:43:59+00:00

I’m developing a Ruby on Rails app that is using both Twitter Bootstrap and

  • 0

I’m developing a Ruby on Rails app that is using both Twitter Bootstrap and jQuery UI. As far as my knowledge goes, most (maybe all?) incompatibility issues between the two have been worked out (and I have the latest gems of both installed and included in asset pipeline). This question doesn’t really have much to do with jQuery UI, I just thought it may be a good bit of knowledge in case there is a compatibility issue there I am unaware of…

Anyway – I’m simply trying to include a few vertically-stacked radio buttons on a user’s page and for some reason the radio button’s are acting just like regular buttons. At first I attributed this to a likely typo like data-toggle="buttons-raadio" or something silly like that, but upon inspection I didn’t see any difference in my code and the suggested format in the documentation. Eventually I got frustrated and just copy-pasted the code (both the HTML and the Javascript to enable the buttons) directly from the documentation for a litmus test, and I got the same behavior.

So, the if you didn’t click the link, the documentation gives a simple example as follows:

    <!-- HTML -->
    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

    /Javascript
    <script> 
      $('.nav-tabs').button();
    </script>

So, what’s the deal? Why is the “active” class not being added to the radio-buttons on a click? I do find it interesting that it says to use it on the class .nav-tabs, instead of .btn (which I tried to no avail, it just messes up the pretty formatting of btn-primary while still not giving the correct functionality), but I’m guessing .nav-tabs filters down to buttons somewhere along the line.

Also, so I decided to check the html on the documentation, and sure enough I’ve got the exact same HTML coupled with the same JavaScript call… I’m at a loss.

Thanks in advance for any and all answers.

-MM

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve done some more research, and this seems to be an issue with compatability between twitter bootstrap and jquery-ui, the specific gems for both as following:

    • gem ‘bootstrap-sass’, ‘2.1’
    • gem “jquery-ui-rails”, “~> 4.0.0”

    So I didn’t actually use the bootstrap/jquery-ui bundled gems out there, which could be part of my issue. On a button click, I would receive a Javascript error: 

       Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' (jquery.js: 552)
   Full trace:
    Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' jquery.js:552
    jQuery.extend.error jquery.js:552
    (anonymous function) jquery.ui.widget.js:183
    jQuery.extend.each jquery.js:661
    jQuery.fn.jQuery.each jquery.js:272
    $.fn.(anonymous function) jquery.ui.widget.js:179
    (anonymous function) bootstrap-button.js:93
    jQuery.event.dispatch jquery.js:3333
    elemData.handle.eventHandle jquery.js:2942

    And if I instantiated each button with the .button() method, I would then received a different error:

        Uncaught Error: no such method 'toggle' for button widget instance (jquery.js:552)
    Full error trace:
     Uncaught Error: no such method 'toggle' for button widget instance jquery.js:552
     jQuery.extend.error jquery.js:552
     (anonymous function) jquery.ui.widget.js:187
     jQuery.extend.each jquery.js:661
     jQuery.fn.jQuery.each jquery.js:272
     $.fn.(anonymous function) jquery.ui.widget.js:179
     (anonymous function) bootstrap-button.js:93
     jQuery.event.dispatch jquery.js:3333
     elemData.handle.eventHandle jquery.js:2942

    To work around this, I’ve added a my-button class to each button, and am doing the click handling myself (keep in mind, you must make sure to add and remove the active class based on which button was clicked, which I am doing through the addClass() and removeClass() methods).

    • 0