Twitter Bootstrap Question posted in

Twitter bootstrap – Implementing Bootstrap Toggle Switch

I am trying to implement toggle switches from http://www.bootstraptoggle.com/.

gem ‘rails-bootstrap-toggle-buttons’

bundle

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-toggle-buttons
//= require turbolinks
//= require_tree .

and

 *= require bootstrap-toggle-buttons
 *= require_tree .
 *= require_self
 */

view:

<%= f.check_box :email_notifications, :'data-toggle'=>"toggle" %>

Is just giving me a plain checkbox. Any clues on why this would not be working?

Tags:

3

Answers


  1. 0

    If you’re using >Rails 4 and >Ruby 1.9

    <%= f.check_box :email_notifications, :data => { :toggle => 'toggle' } %>

    Make sure that your HTML is being generated correctly.

    <!-- Something like this -->
<input type="checkbox" name="email_notifications" data-toggle="toggle">

    Then check the JavaScript console to make sure there are no errors.

    Login or Signup to reply.
  2. 0

    First: you wanted to have the toggle switches from http://www.bootstraptoggle.com/ but from what I see the rails-bootstrap-toggle-buttons gem seems to contain the toggle switches from http://www.bootstrap-switch.org/. This could have been your issue since the latter does not support initialization via the HTML data-toggle attribute.

    Since I also wanted to use the former library due to performance issues with the latter and did not find a gem which shipped it through the asset pipeline I created one: bootstrap-toggle-rails. You can find the documentation in the README.

    But: the data-toggle initialization method also didn’t work for me in combination with Turbolinks, but you can make it work by just initializing it manually with JavaScript and skip the data-toggle attribute and e.g. add a toggle class:

    $(document).on('ready page:change', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});

    Note the page:change event, which is fired by Turbolinks, in addition to the ready event.

    Login or Signup to reply.
  3. 0

    And if you want to add style, simple do like:

    <%= f.check_box :subscribed_to_news, data: { toggle: 'toggle', style: 'ios' } %>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search