I have a custom javascript file which i am loading in my layout.
custom.js
//= require jquery
//= require jquery_ujs
//= require modules
//= require login
//= require user
I am loading in my layout as below. The js is getting loaded in a minified form, it seems some of jQuery calls/events are not happening at all. I am not sure whether its because of minification of files.
<%= javascript_include_tag '/assets/custom' %>
I am not sure how to debug this either. Previously these files were loaded from application.js and none of the files were minified in big js instead were loaded separately and everything was working fine.
Now i am trying to load the custom.js file only for certain modules so loaded the corresponding js files in custom.js, but because of the minification its not working or i am not sure whats the problem.
In my production.rb file, below is the configuration
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
Related
I'm working on a website that uses HTML, CSS, and JavaScript with jQuery plugins. In order to make the website more dynamic, I shifted my code to Ruby on Rails. The HTML and CSS are fine, but some of the jQuery plugins that I had working before aren't functioning anymore.
I tried multiple ways to fix this. I first added the javascript files into app/assets/javascripts and then added //= require pluginfilename in application.js and then <%= javascript_include_tag name..... %> but that didn't work.
Is there something that I'm missing or doing wrong? I'm fairly new to Rails. This is version 4.2.3 btw.
Edit: this is my application.js file
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require countdown
//= require grid
//= require custom
//= require script
//= require_tree .
First thing I would do would be to try and find a version of the plugin that's distributed via CDN, then including it via <%= javascript_include_tag link %>.
Barring that...
Did you do a //= require pluginfilename without the extension? Can you paste in your application.js file so we can take a look?
Also, what errors are you getting your JS console? Are you ensuring that the plugin is being loaded before it's being used? (Load order in the application.js file matters.)
You can find a bridge between Bower and Rails with Rails-Assets.org. I've used this for several projects and it works nicely. If your plugins are using bower, they should exist on Rails-Assets.org
quick example,
make a new rails project, and if we look in to app/assets/javascripts/application.js
it says,
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
in default.
I added foo.js, bar.js in app/assets/javascripts/
and if i run the app, this asset-pipeline
loads foo.js, bar.js in every-pages even i don't need to use in most of the pages.
Is this a right structure?
What about
change to require_self
and use javascript_include_tag and load the js files manually when i need?
Isn't this a better way?
Why Rails asset pipeline default policy is always loading every js files even i dont need?
Browsers usually cache assets files.
Therefore it might make sense to deliver one huge assets file to the browser when the user visits the application for the first time. All following request (even for other pages) will be faster, because the browser will not have to reload other small assets.
But it depends: If you have large javascript libraries that are only rarely used in your app, then it might be better to deliver that files only on that special pages.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Notice the last require_tree . which means, what ever javascript files currently present inside your app/javsacript folder will be auto loaded.
So, in reply to your first question, Yes it's a right structure. Js files inside javascript folder will get auto loaded.
You have kept the js file inside js folder means, in your project you are going to use it :)
In production:
When you precompile your assets in production machine, all your js,css will be precompiled into a single application.css & application.js file, so we don't need to bother about loading each manually.
I know it is an old question but this answers could help someone.
If you need to add an asset just in a specific place you need to add it to the precompile array. In Rails 3 you need to modify config/application.rb file by adding the asset in this way:
config.assets.precompile += %w( foo.js bar.js )
In Rails 4 and 5 you need to modify config/initializers/assets.rb file in this way:
Rails.application.config.assets.precompile += %w( foo.js bar.js )
Don't forget to restart the server.
This article is an excellent resource to learn about Asset Pipeline.
I have to load JS files in order in a rails view.
In the rails view I have:
<%= javascript_include_tag "diagrams" %>
The diagrams.js manifest file have the required JS files in the order that is needed:
//= require diagramtool/kinetic
//= require diagramtool/diagramtool0
//= require diagramtool/diagramtool1
//= require diagramtool/diagramtool2
But they are not load in the order specified in the diagrams.js file.
I already have removed the require_tree . in the application.js file.
What do I have to do to load the JS files in a specific order?
Edit1:
Every time I click in the view I get different results (it seems random):
I don't really understand what is going on here!! Is that difficult in Rails to load JS files in order? I have read some things about the asset pipeline and I don't understand this random behaviour. If I refresh the page always works, the files are always loaded in order. Any help?
Edit2:
The view source is like this:
I am trying hard to have one of my javascript file load/work with a Rails4 app.
The file is users.js.coffee . This is a catch all javascript file that I want loaded for all pages (not necessarily just for users controller)
If I try to load by localhost:3000/assets/users.js I can see the compiled JS file. However using cmd+o on chrome doesnt load the file and also the events are not fired so I know its not working(and loading)
Also tried running bundle exec rake assets:clean assets:precompile
I do not see any 500 or 400 or js errors in console. The simplest of users.js.coffee doesnt work as well
$(document).ready ->
alert('hello')
Some configs:
applcations.js
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
development.rb
config.assets.initialize_on_precompile = false
config.serve_static_assets = false
production.rb
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true
# Compress JavaScripts and CSS
config.assets.compress = true
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
config.assets.debug=true
Also the users.js.coffee was working fine before I started playing around with getting bootstrap using bootstrap-sass etc (on an tangent,eventually ended up loading bootstrap from hosted CDNs in application.haml, not sure if it should interfere with how js files are loaded/works)
Any pointers to debug this is greatly appreciated. Already spent few hours and Asset Pipeline gets me everytime
Thanks
P.S:
I am deploying to heroku (however this fails in both dev and heroku so hopefully fixing in dev should be enough)
Update application.js content by moving //= require users after all other libraries that your application's javascripts depend on but before the require_tree .:
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
The order of requiring javascripts is important here. If your file is users.js.coffee then you need jQuery for coffeescript so jQuery must be required before users.
I'm trying to create another manifest file, called app/assets/javascripts/base.js that looks roughly like this:
//= require jquery
//= require jquery_ujs
//= require_tree ./backbone/tempaltes
My plan is to include this before my app/assets/javascripts/application.js file, which has my main backbone code, as such:
//= require ./backbone/app
// etc...
My thinking is that I can cache the stuff that won't change much (my templates, jquery, plugins, etc.) and cache-bust my app code, which will likely change quite frequently, reducing the page size to the client.
I'm requiring both files in my app/views/layouts/application.html.haml like so:
= javascript_include_tag "base"
= javascript_include_tag "application"
However, when I load up my developemnt server, only the files from application.js are loaded; none of the files in base.js are loaded. I've added this line in config/application.rb:
config.assets.precompile += %w(base.js)
... but that doesn't get any of the assets required in base.js to load in development. What do I have to do to get these files to load?