読者です 読者をやめる 読者になる 読者になる

Rails3でjQueryを使う方法

前回の記事の続きでjQueryも使えるようにする。

インストール

Gemfileにjquery-railsを追加

gem 'jquery-rails'

jQueryをインストール。(prototype.js関連のファイルが削除される)

$ bundle install
$ rails g jquery:install
      remove  public/javascripts/controls.js
      remove  public/javascripts/dragdrop.js
      remove  public/javascripts/effects.js
      remove  public/javascripts/prototype.js
      create  public/javascripts/jquery.min.js
      create  public/javascripts/jquery.js
    conflict  public/javascripts/rails.js
   Overwrite  public/javascripts/rails.js? (enter "h" for help) [Ynaqdh] y
       force  public/javascripts/rails.js

プロジェクト作成時にprototype.jsが不要だと分かっている場合は-Jで生成を抑止できる。

$ rails new APP_NAME -J

動作確認

views/samples/index.html.hamlに以下の記述を追加。

  3 %table#fade_table
(snip)
 19 :css
 20   #fade_table {
 21     display: none;
 22   }
 23 :javascript
 24   window.onLoad = (function(){
 25     $('#fade_table').fadeIn('slow');
 26   })();

これでサーバを再起動して/samplesにアクセスするとデータのtableがフェードインしながら表示されます。
内の読み込むjsもprototypeからjQueryに変わっています。