Sprockets::FileNotFound while attempting to include external JS file - javascript

I am trying to get rangeslider.js working in Ruby on Rails. I have used their GitHub page as a reference, but couldn't find any help for Rails.
http://andreruffert.github.io/rangeslider.js/
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require rangeslider.js
//= require rangeslider.min.js
//= require_tree .
I came across the following error message
Sprockets::FileNotFound
(in C:/Users/rmatthews/Documents/repos/pcbuilder/app/assets/javascripts/application.js:17)
Line 17, was //= require rangeslider.min.js
The files are located on my computer, but in my /downloads/rangeslider.js-0.3.7 directory
My guess is that Rails does not search that directory.
Do I need to place them somewhere else, like /vendor/assets?
I've been following this as a Reference, but couldn't find much
http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
I've seen a couple of similar questions, but since they were discussing jquery, they didn't seem to be of much help.

Rails does not search random directories that exist outside of your application. You will need to place this file at vendor/assets/rangeslider.js.
Then require it by:
//= require rangeslider

Related

ActionController::RoutingError (No route matches [GET] controller_name/fusioncharts.widgets.js

Hello community I'm implementing Fusion Charts in my rails application. I followed all the steps guided in the installation of fusion charts with rails by keeping all the js files in vendor/assets/javascripts. After refreshing the page I can see the div gots populated but with the error Chart type not supported. Once I kept the js files in app/assets/javascripts it works. But not from vendor path. Any help will really be appreciated. Thanks in advance.
I think
Adding all required JS files in assets/javascript/application.js will fix the problem.
e.g.
In file assets/javascript/application.js
//= require fusioncharts/fusioncharts
//= require fusioncharts/fusioncharts.charts
//= require fusioncharts/fusioncharts.widgets
//= require fusioncharts/fusioncharts.maps
//= require fusioncharts/maps/fusioncharts.usa
//= require fusioncharts/maps/fusioncharts.world
//= require fusioncharts/themes/fusioncharts.theme.fusion
Do let me know if this solves the issue.

Rails 4 - No JavaScript errors but JS not working

I'm trying to learn Ruby on Rails and understand the asset pipeline. I figured a good way to do this would be to create my website in Rails and learn with it. However, upon implementing my JS, it seems to add it to the file, but do nothing with it as the scripts aren't working (or some of them...)
I have just set it up on Heroku as I assume that's the easiest way for you to see the code? https://secret-citadel-76066.herokuapp.com/
I haven't yet called owl carousel so I'm sure that would fix the main sections as they're all owl carousels, but what's not working is the navigation and also a scroll to next section should scroll in, and at the bottom a scroll to top should scroll in.
However, somethings work - such as the scrollbar (nicebar).
Any suggestions?
EDIT:
//= require jquery
//= require jquery_ujs
//= require jquery.easing.1.3
//= require detectmobilebrowser
//= require isotope.pkgd.min
//= require wow.min
//= require waypoints
//= require jquery.counterup.min
//= require jquery.nicescroll.min
//= require gmaps
//= require materialize-sprockets
//= require common
//= require stuart-green
//= require turbolinks
note: I deleted the tree because I want to have more control over what loads when
We have the same issue in our project just like yours.
sometimes our js files not working but no error.
try to remove
//= require turbolinks

How to debug in the application.js with compressed javascript

I got the following errors,
When I opened the Chrome javascript console,then look insight it.
application.js?body=1:1249
It is just a group of compressed js code
And I've open the in the development.rb
# Expands the lines which load the assets
config.assets.debug = true
I can not grep the any piece of the javascript source code in my Rails app.
So I don't know where does it come from ?
How can I fix the unknown error quickly in Rails ?
Thanks
Uncaught Error: Graph container element not found application.js?body=1:1249
GET http://www.superfish.com/ws/sf_main.jsp?dlsource=vbqxugf&userId=Ei9nuSYzM8NCWiFeoMKLn6&CTID=addtofeedly net::ERR_BLOCKED_BY_CLIENT
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require tinymce-jquery
//= require raphael
//= require morris
//= require_tree .
Make sure sure you are running rails in development mode and
config.assets.compress = false
is set in development.rb
If you do not manage to get the uncompressed version you the another option:
Compressed files can be made "pretty" in Chrome if you click on the {} symbol.
https://developer.chrome.com/devtools/docs/javascript-debugging#pretty-print

Rails: Sprockets can't find file

my app's working directory looks something along the lines:
app
-assets
-javascripts
- theme
--jquery.min.js
--excanvas.min.js
-- application.js
The application.js previously had require_tree ., however, it loaded excanvas.min.js before jquery.min.js. This brought up a javascript error. I would like to switch the load order. So I updated application.js to:
//= require unicorn/jquery.min
//= require unicorn/excanvas.min
However, this gave me the following error:
Sprockets::FileNotFound in Admin::Home#index
couldn't find file 'unicorn/jquery.min.js'
I was wondering why I can't seem to find jquery.min. Any ideas?
Thanks!
I changed the application.js to:
//= require ./unicorn/jquery.min
//= require ./unicorn/excanvas.min
and it seemed to work.

Rails can't include AngularJS

I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.
I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)
After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.
in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work
In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.

Categories