Rails5 + Thanh tiến trình JQuery không hoạt động

Question

Thực hiện thanh tiến trình JQuery để khi bạn cuộn xuống , thanh này sẽ hiển thị thanh màu xanh lá cây ở trên cùng. Khi tôi bắt đầu cuộn thanh tiến trình không xuất hiện. Tôi kiểm tra nguyên tố trên thanh yếu tố nó cho thấy chiều rộng% đi lên xem hình

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> 

xem nhật ký không tìm thấy scr oll nhưng thấy nó yếu tố chiều rộng đi lên, (xem ảnh chụp màn hình trước)

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' 

sản phẩm controller.rb

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

Tôi có điều này trong tuyến đường của tôi

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' 

Answer 1

Lỗi này

ActiveRecord :: RecordNotFound (Không tìm thấy sản phẩm với 'id' = cuộn)

được kích hoạt bởi đường tài sản không đúng. Khi bạn nhìn vào app/layouts/application.html.erb, bạn sẽ thấy điều này

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

Url cho src là sai. Điều này sau đó được dùng làm /products/scroll.js xung đột với /products/:id và dẫn đến lỗi đó. Bạn có scroll.js trong thư mục /app/assets/javascripts, vì vậy bạn cần sử dụng /assets/scroll.js. Thay đổi nó để thích dưới đây sẽ sửa chữa các lỗi

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

HOẶC

Chỉ cần gọi nó từ application.js bằng cách bao gồm nó như thế này

//= require scroll 

mà tạo ra

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

Tôi đề nghị bạn đọc khoảng Asset Pipeline để hiểu rõ hơn.