railsでjqueryを動かす方法を教えてください。

<やりたいこと>
railsでjqueryを動かしたい！！
web上で調べた方法がうまくいかず、質問しています。

コードはこちらです。
layouts/apprication.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Seasoning</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

assets/javascripts/application.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 jquery
//= require jquery_ujs
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

assets/javascripts/index.js

      $(function() {
     // 「Open」ボタンをクリック時に、fadeInメソッドでHTML要素を表示する
     $('#open').on('click', function() {
       $('#overlay, #modalWindow').fadeIn();
     });
     
     // 「Close」ボタンをクリック時に、fadeOutメソッドでHTML要素を非表示にする
     $('#close').on('click', function() {
       $('#overlay, #modalWindow').fadeOut();
     });
     
     locateCenter();  // => モーダルウィンドウを中央配置するための初期値を設定する
     $(window).resize(locateCenter);  // => ウィンドウのリサイズに合わせて、モーダルウィンドウの配置を変える
   
   // モーダルウィンドウを中央配置するための配置場所を計算する関数
     function locateCenter() {
       let w = $(window).width();
       let h = $(window).height();
       
       let cw = $('#modalWindow').outerWidth();
       let ch = $('#modalWindow').outerHeight();
      
       $('#modalWindow').css({
         'left': ((w - cw) / 2) + 'px',
         'top': ((h - ch) / 2) + 'px'
       });
     }
   });

index.html.erb

<% @flavors.each do |flavor| %>
   <div>
      <%= flavor.name %>
      <%= flavor.price %>
      <%= flavor.status %>
      <button id="edit">編集</button>
      <div id="overlay"></div>
      <div id="modalWindow">
         <p>テスト</p>
         <button id="close">閉じる</button>
      </div>
   </div>
<% end %>

<試したこと>
・gemfileにgem 'jquery-rails'とgem 'jquery-ui-rails'と記入し、bundle installを行い、rails sを立ち上げなおした。
・appllication.jsに//= require jqueryと//= require jquery_ujsを記入した。
・applicaiton.html.erbに<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>が記載されていることを確認した。

以上です。
何卒お力添えよろしくお願いします。
こちらの情報不足などで、追加で何か聞きたいことがあれば、ぜひ聞いてください。
よろしくお願いします。

<補足>

エディター上に$ is not defined, please fix or add /global $/とエラーが出ています。調べたところ、jqueryをcdnで読み込む前にjqueryの関数を使おうとしているからだそうで、一番最初に変えいてある、window.addEventListener(~~~を追加しました。https://pisuke-code.com/jquery-is-not-defined-solution/

FKM

2020/01/13 06:21

Chromeの開発画面におけるコンソールでなにか赤くエラーメッセージが表示されていませんか？

kosuke_ikeura

2020/01/13 08:38

ご指摘ありがとうございます。 Uncaught TypeError: Cannot set property 'mobile' of undefined というエラーメッセージがconsoleに出ていました。調べたところ、jqueryのCDNのscriptをapplication.html.erbに記入すれば良さそうだったため、jqueryの公式ホームページからscriptをコピペしました。次は、if you load both jquery_ujs and rails-ujs use rails-ujs onlyというエラーメッセージが出てきたため、指示通りにapplication.jsのjquery_ujsを削除し、rails_ujsだけ残しました。しかし、consoleにエラーをはかなくなったのですが、ボタンを押しても何も起こりません。。

行動規範の内容に同意します

回答1件

ベストアンサー

erbとjQueryを見比べてください。セレクタに入っているid名openの要素がないです。

   $(function() {
     // 「Open」ボタンをクリック時に、fadeInメソッドでHTML要素を表示する
     $('#open').on('click', function() {
       $('#overlay, #modalWindow').fadeIn();
     });

     // 「Close」ボタンをクリック時に、fadeOutメソッドでHTML要素を非表示にする
     $('#close').on('click', function() {
       $('#overlay, #modalWindow').fadeOut();
     });

なにか別のid名に書き換えてないですか？

投稿2020/01/13 08:44

FKM

総合スコア3633

kosuke_ikeura

2020/01/13 09:09

idを別のものに書き換えてしまっていました。統一しましたが、未だconsoleにエラーはないものの、期待する動作はしないといった感じです。。補足に書きましたが、エディター上にエラーが起きており、これを解決すれば、、？？といった感じになっています。

FKM

2020/01/14 00:12

そのエラーメッセージを教えて下さい。他の方が見ても、最初の質問と混同すると思いますので。

kosuke_ikeura

2020/01/14 00:26

申し訳ありません。結論をいうと、こちら解決いたしました。以下そのプロセスです。・console上のエラーメッセージ：Uncaught TypeError: Cannot set property 'mobile' of undefined →jqueryの公式ホームページからCDNをapplication.html.erbのheadタグに書き加えることで解決。・console上のエラーメッセージ：if you load both jquery_ujs and rails-ujs use rails-ujs only →application.jsのjquery_ujsを削除し、rails-ujsだけを追加。・エディターであるcloud9上にでている"$ is not defined, please fix or add /*global $*/"にエラーらしきものが出ていました。（補足の画像参照） →index.jsの一番上に/*global $*/を記入することで解決しました。・consoleとcloud9に出ているエラー全て解決したが、ボタンを押しても何も反応しない。 →外部javascriptが読み込まれていなかった。（原因） →application.html.erbのheadタグに <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> をCDNより上に追記。これで期待する動作を確認することができました。何度も返信してくださり、ありがとうございます。お騒がせしてしまい、すみませんでした。

行動規範の内容に同意します