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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CentOS

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

Q&A

解決済

1回答

185閲覧

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

koume

総合スコア458

CentOS

CentOSは、主にRed Hat Enterprise Linux(RHEL)をベースにした、フリーのソフトウェアオペレーティングシステムです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

0グッド

0クリップ

投稿2017/08/17 07:12

編集2017/08/17 08:52

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の記述順序がまちがっていますか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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 04:55

nae_stage

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koume

2017/08/18 05:04

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

2017/08/18 05:10

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

2017/08/18 05:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問