Rails5でBootstrap Toggleが初回表示だけ動かない

Ruby on Rails 5をrailstutorialをやっていれていたので、そこにBootstrap Toggleを導入してみました

gemは

rails 5.0.3
bootstrap-sass 3.3.7
bootstrap-toggle-rails 2.2.1
turbolinks 5.0.1

な感じです

assetにjsとcssをセット

$ vim app/assets/javascripts/application.js

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

$ vim app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-toggle";

として、bootstrap-toggleを読み込みました

Viewに

<%= check_box_tag "mode", 1, true,
  data: { toggle: "toggle", on: "On", off: "Off", onstyle: "primary", offstyle: "danger" },
  class: "toggle"
%>

を用意
これだけで、表示されてたりします
初回表示がただのチェックボックスで、リロードすると表示されたり..

Turbolinkの動きのせいらしいので、
GitHub - rkallensee/bootstrap-toggle-rails: Bootstrap Toggle plugin for the Rails asset pipeline
に記載があるように

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

としたら良さそうでしたが Turbolink 5 からは書き方が違うので

$(document).on('turbolinks:render', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle();
});

としてあげると、正しく動きました

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください