Home>

Ruby, Ruby on Rails, JavaScript First Student.
Dining and drink reservation sites are creating.

In Rails 6.0.0, if you use jQuery and select a course full of attached photos, you want to output a per capita payment, and if you enter the number and enter the number of people, you want to output the value of the number of people per capita.

I want to output a payment per person in the code below, but an error occurs.
※ In the current code, we describe the desired desire to output payment per capita.

views /reservations /new.html.erb

<
H1 >
≪
%= LINK_TO 'reservation form', 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 >
Course selection <
/H2 >
      ≪
Div Calss= "reservation-date" >
        ≪
%= f. label: Select date, Class: 'Label'% >
≪
BR />
        ≪
%= f.date_field: date, class: 'date'% >
      ≪
/DIV >
      ≪
div Class= "reservation-time" >
        ≪
%= f. label: Choosing time, Class: 'Label'% >
≪
BR />
        ≪
%= f.time_field: Time, class: 'time'% >
      ≪
/DIV >
      ≪
DIV Class= "reservation-People" >
        ≪
%= F.Label: Number of people% >
≪
BR />
        ≪
%= F. Number_field: People, Class: 'People'% >
Man
      ≪
/DIV >
      ≪
% # Output desired location% >
      ≪
DIV Class= "MENU" >
        Course <
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 >
Payment per person <
/SPAN >
≪
BR />
        ≪
SPAN >
        ≪
SPAN ID= "Person_Price" >
≪
/SPAN >
circle
        ≪
/SPAN >
      ≪
/DIV >
      ≪
DIV Class= "Total-Price" >
        ≪
SPAN >
Total amount <
/SPAN >
≪
BR />
        ≪
SPAN >
        ≪
SPAN >
≪
/SPAN >
circle
        ≪
/SPAN >
      ≪
/DIV >
      ≪
% # Output desired location% >
      ≪
div Class= "reservation-remark" >
        ≪
%= F. Label: Other% >
≪
BR />
        ≪
%= F.Text_Area: remark, placeholder: "dislike food, etc.", class: 'remark'% >
      ≪
/DIV >
    ≪
DIV >
      ≪
%= f.submit "Book"% >
 ≪
BR />
    ≪
/DIV >
  ≪
div Class= "reservation-BTN" >
    ≪
%= Link_to 'Back', 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);
})

Try to be tried

·≪ Script src= "code.jquery.com/jquery-3.6.0.js" Integrity= "SHA256-H + K7U5CNXL1H5YWQFKTSJ8PCMON9AAQ30GDH27XC0JK="Crossorigin= "Anonymous" > ≪ /Script >State of the current code

Error Message
Uncaught ReferenceError: $ IS NOT DEFINED
AT Object ../APP /JavaScript /MENU.js (MENU.js: 1)
AT WebPACK_REQUIRE (Bootstrap: 19)
AT Object ../ap /JavaScript /Packs /Application.js (Application.js: 10)
AT WebPACK_REQUIRE (Bootstrap: 19)
At Bootstrap: 83
At Bootstrap: 83

· Remove the above code, and install jQuery-Rails with GEM

Error Message
Uncaught ReferenceError: $ IS NOT DEFINED
AT Object ../APP /JavaScript /MENU.js (MENU.JS: 1)
AT WebPack_Require (Bootstrap: 19)
AT Object ../ap /JavaScript /Packs /Application.js (Application.js: 10)
AT WebPACK_REQUIRE (Bootstrap: 19)
At Bootstrap: 83
At Bootstrap: 83
If there is a shortage information, you will be happy to ask you.
Thank you very much.

Please paste the error message instead of the image but to the question statement. /If you want to put an image or external service, you can paste it directly with copy &paste while editing a question.

cubick♦2021-08-28 15:38:18

@cubick Mr. Good evening Thank you for pointing out. We made the contents of the content you received. If you have any deficiencies, you will be happy to teach you. Thank you very much.

ysk05072021-08-28 15:38:18

The four-line code written in JavaScript /Menu.js is not JavaScript. First of all, I think it is good to learn from the foundation about JavaScript.

Fumu 72021-08-28 15:38:18