jquery-railsとtwitter-bootstrap-railsを共存させる

デザインが得意ではないエンジニアとしては、twitter bootstrap を利用して、イケテルデザインにしたいところである。rails で利用するには twitter-bootstrap-rails を入れれば良いので、インストールしたところ、jquery-rails が動かなくなったので、調査した結果を以下に記載する。

要件

  • jquery-railsとtwitter-bootstrap-rails を共存させる

環境

  • Mac Book Air

手順

jquery-railsとtwitter-bootstrap-railsをインストールする

Gemfileに以下を記載する。

# Bootstrap
gem 'less-rails'
gem 'twitter-bootstrap-rails'

# jQuery
gem 'jquery-rails'

bundleでインストールする。

$ bundle install

twitter-bootstrap-railsを反映する

$ rails g bootstrap:install
$ rails g bootstrap:layout application fixed

jquery-railsを動作するように修正する

twitter-bootstrap-railsを反映すると、jQueryが動かなくなる。上記で最後に実行する以下のコマンドの実行結果として、

$ rails g bootstrap:layout application fixed

app/views/layouts/application.html.erbを書き換えている。その中で、Javascriptsの読み込みがページロードの最後に移動させられており、その結果、jquery.jsが読み込まれる前にAjaxがコールされてしまっている。

というわけで、jQueryを最初にロードするように以下の変更を加える。

  <head>
    :
    <%= javascript_include_tag "jquery" %>
  </head>

このままだと、ファイルの最後にあるjavascript_inclue_tag "application"でもう一度jQueryがロードされてしまうので、一括ロードリストであるapp/assets/javascripts/application.jsからjQueryをコメントアウトする。

//= // この行を無効にする require jquery

これですべて動作するようになる。