質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.65%

Rails5.1.3でJqueryを使う方法を教えてください。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,464

koume

score 156

Rails5.1.3 でWebアプリケーション制作の勉強中ですがJqueryがどうしても使いたくていろいろ試してみましたが上手くいって
いないようなので質問させていただきます。 まず、やろうとしたこと(やりたいこと)を説明させていただきます。

1,jqueryとCoffeeScriptを使って、画面の動的書き換えを行いたい。

・デフォルトでは無効な入力欄を表示しておいてユーザーが必要に応じて入力欄の有効・無効を切り替えるような
ユーザーインターフェースを作りたい。

・ブラウザにページが読み込まれた後(ユーザー編集画面のパスワードの編集画面になります。)
ある要素の表示・非表示を切り替えたい。
入力欄の 有効・無効 を切り替えたい。

実際に表示されている状態は編集フォームの初期状態で表示されています。  ([  ]の部分は実際は 長方形で囲まれています。)

パスワード
[ (入力できない状態) ] [変更する]    と表示されております。

[変更する]をクリックすると以下の表示に切り替わるようにしたい。
パスワード*
[ (入力できる状態) ] [変更しない]    と表示させたいのですが画面が切り替わらない状態です。

最初は何が起きているのかわからず悩んでいましたがjqueryが動いていないのでは?と思ったのでネットで調べたらRails5.1はjqueryを
デフォルトでサポートしていないということでしたので本サイトで質問させていただいたり、自分でいろいろやってみました。やったことは以下です。

Gemfile に jqueryに関するコードを追記しました
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'

$ bin bundle 

app/assets/javascripts/application.sjを次のファイルにコピーし(admin.js, staff.js, customer.js) application.jsを削除。
各ファイルの最終行 //= require_tree .の部分をそれぞれ//= require_tree ./admin, //= require_tree ./staff,
//= require_tree ./customerに変更。
さらに、//= require_tree ./sharedを追記しました。記述は以下になります。
(admin.js, staff.js, customer.js共通)

app/assets/javascripts/admin.js  (staff.js, customer.js 共通)

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree ./shared
//= require_tree ./admin  #この部分がそれぞれstaff,customerに変わる。


アセットパイプラインの設定

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( staff.css admin.css customer.css staff.js admin.js customer.js )


レイアウトファイルの修正(各ファイル同じ内容 admin・staff・customerの部分が違うだけです)

app/views/layouts/admin.html.erb

app/view/layouts/admin.html.erb  #staff.html.erb, customer.html.erbも同じ

<!DOCTYPE html>
<html>
<head>
  <title><%= document_title %></title>
  <%= stylesheet_link_tag    'admin', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'admin', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div id="wrapper">
    <%= render 'admin/shared/header' %>
    <div id="container">
      <%= yield %>
    </div>
    <%= render 'shared/footer' %>
  </div>
</body>
</html>


ここまでやりました。
コードは以下になります。

フォームプレゼンターの記述・修正

app/presenters/staff_member_form_presenter.rb

class StaffMemberFormPresenter < FormPresenter
  def password_field_block(name, label_text, options = {})
    if object.new_record?
      super(name, label_text, options)
    else
      markup(:div, class: 'input-block') do |m|
        m << decorated_label(name, label_text, options.merge(required: false))
        m << password_field(name, options.merge(disabled: true))
        m << ' '
        m.button('変更する', type: 'button', id: 'enable-password-field')
        m.button('変更しない', type: 'button', id: 'disable-password-field',
          style: 'display: none')
        m << error_messages_for(name)
      end
    end
  end

  def full_name_block(name1, name2, label_text, options = {})
    markup(:div, class: 'input-block') do |m|
      m << decorated_label(name1, label_text, options)
      m << text_field(name1, options)
      m << text_field(name2, options)
      m << error_messages_for(name1)
      m << error_messages_for(name2)
    end
  end

  def check_boxes
    markup(:div, class: 'input-block') do |m|
      m << check_box(:suspended)
      m << label(:suspended, 'アカウント停止')
    end
  end
end


CoffeeScriptプログラムの作成

app/assets/javascripts/admin/staff_member_form.js.coffee

$(document).on 'page:change', ->
  $('form.edit_staff_member').on 'click', '#enable-password-field', ->  #ここから下が「変更する」ボタンの記述
    $('#enable-password-field').hide()
    $('#disable-password-field').show()
    $('#staff_member_password').removeAttr('disabled')
    $('label[for=staff_member_password]').addClass('required')
  $('form.edit_staff_member').on 'click', '#disable-password-field', ->  #ここから下が「変更しない」ボタンの記述
    $('#disable-password-field').hide()
    $('#enable-password-field').show()
    $('#staff_member_password').attr('disabled', 'disabled')
    $('label[for=staff_member_password]').removeClass('required')


以上で問い合わせの内容の症状になってしまいます。自分ではjqueryが動いていないせいでCoffeeScriptプログラムが何も機能していないせいではないかと
考えていますが、他に原因があるのでしょうか?それともどこかコードミスがあるのでしょうか?
ここから先、jqueryを動かすために他にやるべきことはあるのでしょうか?
関係ないとは思いますがアセットプリコンパイル($ rails assets:percompile)を実行する必要があるのでしょうか?
エラーが出ていないのでこれ以上何もできなくて困っています。どなたか助けてください。お願いします。

admin.jsの記述順序がまちがっていますか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

エラーが出てこないということですので、イベントが発火していないのではないかと想像しました。
app/assets/javascripts/admin/staff_member_form.js.coffee の、  

$(document).on 'page:change', -> 


$(document).on 'turbolinks:load', -> 


にすると、どうでしょうか?
Rails5(Turbolinks5)から記述が変わっています。(参考

もしTurbolinksをオフにしているようでしたら、

$(document).on 'ready', -> 


でしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/18 14:04

    回答ありがとうございます。全く手も足も出ない状況だったのですが、上手く動いてくれました。本当にありがとうございました。くじけそうになっていたのですがおかげさまでなんとか前へ進めます。今後とも宜しくお願いします。

    キャンセル

  • 2017/08/18 14:10

    先日ちょうど私も同じ箇所でつまずいておりました。
    動いたようで良かったです!共に頑張りましょう!

    キャンセル

  • 2017/08/18 14:13

    はい。毎日、エラーとコードミスの連続ですが 共に頑張りましょう!の1行でまた頑張れます。!!
    ありがとう!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる