Implementing a JQuery progress bar so when you scroll down it should show a green bar across the top. When I start scrolling the progress bar does not appear. I inspect element on the bar the element it shows the width % going up see screenshot
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> looking at the logs its not finding scroll but its showing the width element going up, (see prev screenshot)
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' products controller.rb
def set_product @product = Product.find(params[:id]) end I have this in my routes
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 Answers
Answers 1
This error
ActiveRecord::RecordNotFound (Couldn't find Product with 'id'=scroll)
is triggered by incorrect asset path. When you look into app/layouts/application.html.erb, you will see this
<script src="scroll.js"></script> The url for src is wrong. This then served as /products/scroll.js which conflicts with /products/:id and resulted in that error. You have scroll.js in /app/assets/javascripts folder, so you need to use /assets/scroll.js. Changing it to like below should fix the error
<script src="/assets/scroll.js"></script> OR
Just call it from the application.js by including it like this
//= require scroll which generates
<script src="/assets/scroll.js?body=1"></script> I suggest you read about Asset Pipeline to understand better.
0 comments:
Post a Comment