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の記述順序がまちがっていますか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/18 05:04
2017/08/18 05:10
2017/08/18 05:13