0

ruby,ruby on rails, JavaScript初学者です。
飲食店の予約サイトを作成中です。

rails6.0.0において、jqueryを使用し、添付写真のコースプルダウンを選ぶと、一人当たりのお支払いを出力し、人数と入力したら、一人当たりのお支払い×人数の値を出力したいです。

作成ページ & HTML

以下コードにて一人当たりのお支払いを出力したいのですが、エラーが発生してしまいます。
※現状コードでは、一人当たりのお支払いを出力する希望の記述を行なっております。

views/reservations/new.html.erb

<h1><%= link_to '予約フォーム', root_path, class:'reservation-form'%></h1>
<%= form_with model: @reservation, url: new_reservation_path, method: :get, class: 'reservation', local: true do |f| %>

    <div class="reservation-price">
      <h2>コース選択</h2>

      <div calss="reservation-date">
        <%= f.label :日付を選択, class: 'label'%><br />
        <%= f.date_field :date, class: 'date' %>
      </div>

      <div class="reservation-time">
        <%= f.label :時間を選択, class: 'label' %><br />
        <%= f.time_field :time, class: 'time'%>
      </div>

      <div class="reservation-people">
        <%= f.label :人数%><br />
        <%= f.number_field :people, class: 'people'%>人
      </div>

      <%# 出力希望箇所 %>
      <div class="menu">
        コース<br /> 
        <%= f.select :menu_id, (Menu.all.map {|m| [m.name, m.id, {'data-price' => m.price }]}), {}, {id: 'menu_select'} %>
      </div>
      
      <div class="person-price">
          <script src="code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <span>1人当たりのお支払い</span><br />
        <span>
        <span id="person_price"></span>円 
        </span>
      </div>

      <div class="total-price">
        <span>合計金額</span><br />
        <span>
        <span ></span>円
        </span>
      </div>
      <%# 出力希望箇所 %>

      <div class="reservation-remark">
        <%= f.label :その他%><br />
        <%= f.text_area :remark, placeholder:"嫌いな食べ物など",class: 'remark'%>
      </div>

    <div>
      <%= f.submit "予約する"%> <br />
    </div>

  <div class="reservation-btn">
    <%= link_to '戻る', root_path, class:'reservation-form'%> 
  </div>
  
<% end %> 

javascript/menu.js

$('#menu_select').on('change', () => {
  const price = $('#menu_select > option:selected').data('price');
  $('#total_price').text(price);
})

試したこと

<script src="code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> を現状コードの通り記載

エラーメッセージ
Uncaught ReferenceError: $ is not defined
at Object../app/javascript/menu.js (menu.js:1)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83

・上記コードを削除し、gem で jquery-railsをインストール

エラーメッセージ
Uncaught ReferenceError: $ is not defined
at Object../app/javascript/menu.js (menu.js:1)
at webpack_require (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
不足情報等がございましたら、ご質問いただけると幸いです。
どうぞ宜しくお願い致します。

3
  • エラーメッセージは画像ではなく 文字のまま 質問文に貼り付けてください。 / 画像を貼る場合も外部サービスではなく、質問の編集中にコピー&ペーストで直接貼り付けることができます。
    – cubick
    2021年8月22日 11:28
  • @cubick 様 こんばんは、ご指摘ありがとうございます。 いただいた内容を元に修正させていただきました。 何か不備がございましたら、ご教示いただけると幸いです。 どうぞ宜しくお願い致します。
    – ysk0507
    2021年8月22日 12:01
  • javascript/menu.js に書かれている4行のコードは、Javascriptではありません。 まずは、Javascriptについて基礎から学ぶのが良いと思います。
    – Fumu 7
    2021年8月22日 12:34

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。