Rails5 + индикатор JQuery не работает

Внедрение индикатора выполнения JQuery, поэтому при прокрутке вниз он должен показывать зеленую полосу сверху. Когда я начинаю прокрутку, индикатор выполнения не появляется. Я проверяю элемент на панели, что элемент показывает ширину% вверх, см. Снимок экрана

введите описание изображения здесь

введите описание изображения здесь

scroll.js

$(document).on('scroll', function() {

  var pixelsFromTop = $(document).scrollTop()

  var documentHeight = $(document).height()
  var windowHeight = $(window).height()

  var difference = documentHeight - windowHeight

  var percentage = 100 * pixelsFromTop / difference

  $('.bar').css('width', percentage + '%')

})

show.html.erb

<div class="progress">
   <div class="bar"></div>
</div>

<section class="day">

    <h2><%= "To make #{number_to_currency @product.revenue}" %></h2>
    <p class="lead"><%= "You need to make #{number_to_currency @product.monthly_amount} a month" %><br/>
    <%= "You need to make #{number_to_currency @product.daily_amount} a day" %></p>
</section>


<section class="people"> 

    <h2>Or if you create and sell a product</h2>
        <table>
        <p class="lead"><%= "To make #{@product.revenue } 10,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_10000} product" %><br/>

        <%= "To make #{@product.revenue } 5,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_5000} product" %><br/>

        <%= "To make #{@product.revenue } 2,000 people to buy a
        #{number_to_currency @product.create_and_sell_product_2000} product" %><br/>

        <%= "To make #{@product.revenue } 1,000 people to buy a
     #{number_to_currency @product.create_and_sell_product_1000} product" %><br/>

        <%= "To make #{@product.revenue } 100 people to buy a
     #{number_to_currency @product.create_and_sell_product_100} product" %></p>
        </table>
</section>

глядя на журналы, которые не обнаруживают прокрутку, но показывает, что элемент ширины растет (см. предыдущий скриншот)

Started GET "/products/scroll.js" for 127.0.0.1 at 2017-08-14 12:27:17 +0100
Processing by ProductsController#show as JS
  Parameters: {"id"=>"scroll"}
  Product Load (0.4ms)  SELECT  "products".* FROM "products" WHERE "products"."id" = $1 LIMIT $2  [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 3ms (ActiveRecord: 0.4ms)

ActiveRecord::RecordNotFound (Couldn't find Product with 'id'=scroll):

app/controllers/products_controller.rb:67:in `set_product'

продукты controller.rb

  def set_product
      @product = Product.find(params[:id])
    end

У меня это на моих маршрутах

Rails.application.routes.draw do
  resources :products

  root 'products#new'
end


Started POST "/products" for 127.0.0.1 at 2017-08-16 17:03:11 +0100
Processing by ProductsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"ZU4tSNn0PsbSL2CTB45yIuBlrn5OePTYPSbIcdKThzJuu/k7GsiIhFf7JJ98pC5NmhGVg5QyekokpzR1s4tv4A==", "product"=>{"revenue"=>"2000", "months"=>"2"}, "commit"=>"Show Me How Much to Charge!"}
   (0.9ms)  BEGIN
  SQL (3.5ms)  INSERT INTO "products" ("revenue", "months", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["revenue", "2000.0"], ["months", 2], ["created_at", "2017-08-16 16:03:11.679460"], ["updated_at", "2017-08-16 16:03:11.679460"]]
   (46.6ms)  COMMIT
Redirected to http://localhost:3000/products/82
Completed 302 Found in 57ms (ActiveRecord: 51.0ms)


Started GET "/products/82" for 127.0.0.1 at 2017-08-16 17:03:11 +0100
Processing by ProductsController#show as HTML
  Parameters: {"id"=>"82"}
  Product Load (0.3ms)  SELECT  "products".* FROM "products" WHERE "products"."id" = $1 LIMIT $2  [["id", 82], ["LIMIT", 1]]
  Rendering products/show.html.erb within layouts/application
  Rendered products/show.html.erb within layouts/application (7.2ms)
Completed 200 OK in 398ms (Views: 395.0ms | ActiveRecord: 0.3ms)


Started GET "/products/scroll.js" for 127.0.0.1 at 2017-08-16 17:03:12 +0100
Processing by ProductsController#show as JS
  Parameters: {"id"=>"scroll"}
  Product Load (0.3ms)  SELECT  "products".* FROM "products" WHERE "products"."id" = $1 LIMIT $2  [["id", 0], ["LIMIT", 1]]
Completed 404 Not Found in 1ms (ActiveRecord: 0.3ms)



ActiveRecord::RecordNotFound (Couldn't find Product with 'id'=scroll):

app/controllers/products_controller.rb:67:in `set_product'

введите описание изображения здесь

Ответы

Ответ 1

Эта ошибка

ActiveRecord:: RecordNotFound (Не удалось найти продукт с идентификатором 'id' = прокрутка)

запускается с помощью некорректного пути ресурса. Когда вы заглянете в app/layouts/application.html.erb, вы увидите это

<script src="scroll.js"></script>

Неверный URL-адрес для src. Тогда это служило /products/scroll.js, который конфликтует с /products/:id и приводит к этой ошибке. У вас scroll.js в папке /app/assets/javascripts, поэтому вам нужно использовать /assets/scroll.js. При изменении этого значения, как показано ниже, следует исправить ошибку

<script src="/assets/scroll.js"></script>

ИЛИ

Просто вызовите его из application.js, включив его как

//= require scroll

который генерирует

<script src="/assets/scroll.js?body=1"></script>

Я предлагаю вам прочитать Asset Pipeline, чтобы лучше понять.