QA@IT

railsでjQueryが動きません。。

7097 PV

rails初心者です。
基本的な質問ですいません。

railsでjQueryを使ったアプリを作ろうと思い、以下の手順で実装してみたのですがうまく動きません。。
ネット等で調べてみたのですが、なかなか見つけられず、ずっと立ち止まったままになってしまっていたので投稿させて頂きました。
どなたかアドバイス頂けますでしょうか。

環境
ruby 1.9.3p194
rails 3.2.13

  1. 新規プロジェクトの作成

    $ rails new test --skip-bundle
    
  2. gemファイルに以下を追記

    source 'https://rubygems.org'
    gem 'rails', '3.2.12'
    # Bundle edge Rails instead:
    # gem 'rails', :git => 'git://github.com/rails/rails.git'
    # for deployment on Heroku
    gem "heroku"
    group :development, :test do
    gem 'sqlite3'
    end
    group :production do
    gem 'sqlite3'
    #  gem 'pg'
    #  gem 'thin'
    end
    # Gems used only for assets and not required
    # in production environments by default.
    group :assets do
    gem 'sass-rails',   '~> 3.2.3'
    gem 'coffee-rails', '~> 3.2.1'
    gem 'uglifier', '>= 1.0.3'
    gem 'jquery-rails'
    **#jQuery使用のため以下を追記**
    gem 'jquery-ui-rails'
    end
    #bootstrap使用のため以下を追記
    gem 'therubyracer'
    gem 'less-rails-bootstrap'
    
  3. bundle実行

    $ bundle install
    
  4. /app/assets/javascripts 直下のapplication.jsファイルに、以下の内容を記述

    //= require jquery
    //= require jquery_ujs
    //= require_tree .
    //= require twitter/bootstrap
    //= require jquery.ui.all
    //= require jquery.ui.datepicker-ja
    
  5. /app/assets/javascripts 直下にcommon.jsファイルを作成し、以下の内容を記述

    $(function() {
    $('.datepicker').datepicker();
    });
    
  6. /app/assets/javascripts 直下にapplication.jsファイルに、以下の内容を記述

    /*
    *= require_self
    *= require_tree .
    *= require twitter/bootstrap
    *= require jquery.ui.all
    */ 
    
  7. アセットパイプラインの設定
    /config/environments/production.rb

    ・・・
    config.serve_static_assets = true
    ・・・
    
  8. ターミナルでDBを本番環境にし、アセットパイプラインの動作確認

    $ export RAILS_ENV=production
    
    $ rake assets:precompile
    
  9. test用にscaffoldでCRUD機能を持ったアプリを作成

    $ rails g scaffold article title:string content:string
    
  10. viewを編集
    /app/views/articles/index.html.erb
    以下の一文を追記

    <p>Date: <input type="text" id="datepicker" /></p>
    
  11. マイグレーションを行ってwebサーバ起動

    $ rake db:migrate
    
    $ rails server
    

結果、動きませんでした。。。

上記以外に確認する事はありますでしょうか。
お忙しいところ大変恐縮ですが、よろしくお願いします!!

回答

"結果、動きませんでした" とありますが、期待する動作と、どのような問題があったかを書いていただけると回答しやすいです (input にフォーカスを合わせると Datepicker が表示されると期待したが、Rails が起動しない、JavaScript でこんなエラーが発生した、エラーは発生しないが Datepicker が表示されない、など)。

手元の環境で試したところ、特にエラーなどは発生しなかったのですが Datepicker が表示されませんでしたので、これについて書きます。的外れだったら済みません。

この問題は $('.datepicker').datepicker(); と datepicker クラスを指定してるのに、input に datepicker クラスがないために発生しています。<input type="text" class="datepicker" /> とすれば、期待通り動作しました。

編集 履歴 (0)
  • ご回答ありがとうございました。
    仰る通り期待する動作、実際の動作の記述が抜けておりました。申し訳ございません。

    「DatePickerが表示される」を期待したのですが「DatePickerが表示されない」状態でした。

    アドバイス頂いた通り修正したところ期待通り、DatePickerが表示されました!単にhtmlの記述ミスだったとは。。

    ありがとうございました!
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。