Rails 5 can't find JS file - ruby-on-rails

I installed a plugin (http://antenna.io/demo/jquery-bar-rating/examples/) using Bower.
Now I have a file:
vendor/assets/bower_components/jquery-bar-rating/jquery.barrating.js
Also in my application.rb I have:
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
I restarted my Rails server but when I access the app it says:
Sprockets::FileNotFound: couldn't find file 'jquery.barrating' with type 'application/javascript'
Checked in these paths:
/Users/xxx/Documents/Dev/xxx/Backend/app/assets/documentation
/Users/xxx/Documents/Dev/xxx/Backend/app/assets/images
/Users/xxx/Documents/Dev/xxx/Backend/app/assets/javascripts
/Users/xxx/Documents/Dev/xxx/Backend/app/assets/stylesheets
/Users/xxx/Documents/Dev/xxx/Backend/vendor/assets/bower_components
So it looks in the right folder but still can't find the file.
Any idea what is happening?

I can't entirely remember how I did it a while ago, but I think basically if you need the file in the plugin within your js, you could do:
//= require jquery-bar-rating
//OR
//= require jquery-bar-rating/jquery.barrating

Related

Rails 6 "//= require loader" in Application.js file

I have //= require loader in my application JS file and I want to see the file. I do not see it in my JS folder. Where else could it be? How to I find the path to it?

How can I include javascript file in the rails assets pipeline?

I have created a new ruby on rails project using the command : rails new [project_name].
Further, I want to create javascript files, so I can control my view elements.
For this, I've created a new js file and placed it in the app->assets->javascripts->apple_pay.js
Currently the appe_pay.js implementation is just for testing :
console.log("test")
Also, my application.js, used like a manifest file, looks like this :
//= require_tree .
When I run the project using rails server command, I'm expecting to see the message displayed on the console, but it's not, any ideea ?
find: config/initializers/assets.rb
Then: Rails.application.config.assets.precompile += %w[your_file.js]
noticing that as it's out of application.js you need to include it inside your views using:
javascript_include_tag :your_file
Save & Restart your server :)
If you are not install "jquery-rails" then first install the gem and require file also add in application.js
//= require file_name

How to fetch assets inside vendor subfolders in Rails?

I need to install a series of libs in my application, keeping them in their respective folders inside /vendor/plugins/
Example, the ckeditor library:
Main folder in /vendor/plugins/ckeditor/
js file in /vendor/plugins/ckeditor/js/Chart.js
css file in /vendor/plugins/ckeditor/css/chart.min.css
So that I can import into my application.scss like this:
*= require chart.min
And in my application.js like this:
//= require Chart.js
When I try to do this rails only accesses the folder /vendor/assets/plugins/ plugins, generating the error:
could not find file 'chart.min' with type 'text/css'
How do I get the project to scan all of the vendor's subfolders until find the file I'm importing?
First add the /vendor/plugins directory to the assets load path:
module MyApp
class Application < Rails::Application
config.assets.paths << Rails.root.join("vendor", "plugins")
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
end
end
However adding a directory to the assets load path does not mean that Sprockets will search all the subdirectories recursively. Nor is it a very good idea to configure it to do so.
You still need to provide a complete path from /vendor/plugins.
app/assets/javascripts/application.js:
//= require ckeditor/js/Chart
app/assets/stylesheets/application.css:
*= require ckeditor/css/chart.min
Or you can just use the Rails integration gem and skip all the hassle.

Unable to require a js file from a gem in asset pipeline

I have a local gem. And there is a js file:
app/assets/javascripts/autocomplete_location/location_autocomplete.js
Now I am trying to use this gem in my rails project. I am able to use it's other ruby files, but can't include the above js file. I have tried putting engine.rb file in my gem. Still no luck.
I tried
//= require autocomplete_locations/location_autocomplete
in application.js file of my project. Still, when I start server and open any page, it throws this error:
Sprockets::FileNotFound > couldn't find file 'autocomplete_locations/location_autocomplete' with type 'application/javascript'
//= require autocomplete_locations/location_autocomplete is still not the same as 'autocomplete_locations/location_autocomplete. The folder being required is autocomplete_locations and the name of the folder containing the file is autocomplete_location. I didn't catch that neither on my previous comment. If that does not solve the issue. Try requiring and testing a different javascript file just to make sure it is not a problem with the asset pipeline.
Thanks for your suggestions, after struggling through several hit and trial, I solved this by adding below code in lib/autocomplete_locations.rb:
class Engine < ::Rails::Engine
environment = Sprockets::Environment.new
environment.append_path '../vendor/assets/javascripts'
end
Now I am able to require my assets in rails project.

couldn't find javascript file in application.js.erb

I tried to load i18n.js and translations.js in the application.js.erb
However the file i18n.js could be found, but the translations.js could not found.
it shows me this exception ActionView::Template::Error (couldn't find file 'translations.js')
How could I fix the problem? I've also tried to load ../../public/javascript/translations.js but it didn't work as well.
public/javascripts
-i18n.js
-translations.js
pplication.js.erb
//= require i18n
//= require i18n.js
//= require translations.js
The asset pipeline and public/ have nothing to do with each other.
If you want to include the files via the asset pipeline, they need to go under app/assets, lib/assets or vendor/assets.
Anything placed in public/ is not part of the asset pipeline and you'll need to include it via its own <script src="/i18n.js"> tag.

Resources