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

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

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

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

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

573閲覧

Railsアプリケーションで突然Javascriptが動作しなくなった。

takuma_lol

総合スコア0

Ruby

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

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/13 07:04

編集2021/05/13 08:45

前提・実現したいこと

Railsチュートリアル10章を進めている時に、javascriptが関係していると思われる部分が突然動作しなくなってしまいました。

具体的には
①jQueryで動かしているtoggleDowmメニューが動作しない。
②usersのindexページにおいて、adminがtrueであるユーザーにもdeleteリンクが表示されない。
この2点の問題が発生しています(ソースコードは下述いたします)。

この問題が発生した原因として、1つだけ心当たりがあるのですが、対処法については見当がつかず、手詰まりとなってしまいました。
(一応試したこともあるので、下述いたします)
その心当たりですが、
作業中にrails serverが起動できなくなってしまったため、
https://qiita.com/kamyu/items/1d39d4e57f04a3ad6b0c
こちらの記事を参考にしてプロセスの強制停止を行いました。

程度の低い質問でしたら申し訳ございません。
また、質問に必要な情報に不足等ありましたら、お手数ですがコメントをいただければ随時追記いたします。

よろしくお願いいたします。

該当のソースコード

HTML

1(_header.html.erb)(ヘッダーのパーシャルです) 2<header class="navbar navbar-fixed-top navbar-inverse"> 3 <div class="container"> 4 <%= link_to "sample app", root_path, id: "logo" %> 5 <nav> 6 <ul class="nav navbar-nav navbar-right"> 7 <li><%= link_to "Home", root_path %></li> 8 <li><%= link_to "Help", help_path %></li> 9 <li><%= link_to "About", about_path %></li> 10 <% if logged_in? %> 11 <li><%= link_to "Users", users_path %></li> 12 <li class="dropdown"> 13 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 14 Account <b class="caret"></b> 15 </a> 16 <ul class="dropdown-menu"> 17 <li><%= link_to "Profile", current_user %></li> 18 <li><%= link_to "Settings", edit_user_path(current_user) %></li> 19 <li class="divider"></li> 20 <li> 21 <%= link_to "Log out", logout_path, method: :delete %> 22 </li> 23 </ul> 24 </li> 25 <% else %> 26 <li><%= link_to "Log in", login_path %></li> 27 <% end %> 28 </ul> 29 </nav> 30 </div> 31</header>

HTML

1(_user.html.erb)(indexページにおいてユーザー一覧を表示するためのパーシャルです) 2<li> 3 <%= gravatar_for user, size: 50 %> 4 <%= link_to user.name, user %> 5 <% if current_user.admin? && !current_user?(user) %> 6 | <%= link_to "delete", user, method: :delete, 7 data: { confirm: "You sure?" } %> 8 <% end %> 9</li>

ruby

1(seeds.rb) 2# メインのサンプルユーザーを1人作成する 3User.create!(name: "Example User", 4 email: "example@railstutorial.org", 5 password: "foobar", 6 password_confirmation: "foobar", 7 admin: true) 8 9# 追加のユーザーをまとめて生成する 1099.times do |n| 11 name = Faker::Name.name 12 email = "example-#{n+1}@railstutorial.org" 13 password = "password" 14 User.create!(name: name, 15 email: email, 16 password: password, 17 password_confirmation: password) 18end

試したこと

①Chromeの設定で、Javasctiptが有効であるか確認をしました。
https://qiita.com/keiy121/items/d1880ff2d0de444458c7
こちらの記事を参考にしてコードを追加しました。
https://teratail.com/questions/164311
こちらの質問を参考にして手順を実行しました。

以上3つのことを試しましたが、いずれも改善には結びつきませんでした。

補足情報(FW/ツールのバージョンなど)

Rails 6.0.3
ruby 2.6.3
AWS cloud9を使用

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

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

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

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

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

maisumakun

2021/05/13 07:05

JavaScriptコード自体は、どこへどのようなものを書いていますでしょうか?
m.ts10806

2021/05/13 08:24

HTMLerbという言語ではないので単にHTMLだけにされたほうが良いかと
takuma_lol

2021/05/13 08:42 編集

maisumakun様 自分でjavasctiptを書いて実際に何か動かしているという訳ではないのですが、Bootstrapを使ってドロップダウンメニューを作成しています。そのドロップダウンの動作のため、Bootstrapがjqueryを用いていると理解しております。 ドロップダウンメニューをクリックしてもメニューが降りてこないことと、Railsチュートリアルのindexにてdeleteメニューを表示する手順を説明している場所でブラウザのjavasctiptが有効になっているかの言及があったため、この問題はjavasctiptが動作していないことが原因であると推察いたしました。 また、ビューののjavasctiptの読み込みは以下で行なっております。 ``` (app/views/layouts/application.html.erb) <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <!--このscriptは問題解決のために追加した。エラーを引き起こす可能性あり--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %> <div class="container"> <% flash.each do |message_type, message| %> <div class="alert alert-<%= message_type %>"><%= message %></div> <% end %> <%= yield %> <%= render 'layouts/footer' %> <%= debug(params) if Rails.env.development? %> </div> </body> </html> ``` もう一つ必要かもしれないコードを載せておきます。 ``` (app/assets/javascripts/application.js) //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . ``` 初学者のため、追記依頼の主旨・意図を正しく読み取れていなければ大変申し訳ございません。 さらに必要な情報があれば、教えていただけると大変ありがたいです。 よろしくお願いいたします。
takuma_lol

2021/05/13 08:44

m.ts 10806様 単なるhtmlファイルで埋め込みRubyを使用しているという訳ではないことを強調するためにHTMLerbと記載いたしましたが、ファイル名は一行目で明記しているため、確かにHTMLと表記した方が良いかもしれません。 ご指摘ありがとうございます。修正いたします。
退会済みユーザー

退会済みユーザー

2021/05/13 09:21

webブラウザに表示されたhtmlの文法チェック、そこで読み込まれるjsの文法チェック。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問