In my rails 3 app it has:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery-ui
And it works fine. But I don't understand how it works. I think I understand the third line which I believe adds everything to this file that is found in the same directory as this file (/app/assets/javascript). But what about the first line? Where does it get the jquery file? I don't see it in any of the directories it mentions in the comment at the beginning of the file, specifically:
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
Where does rails go to get the jquery javascript file?
The require part you mentioned above is called asset pipeline, which is part of new features of rails 3. The goal of this is to concatenate all javascripts file together, so you have your page load faster by a single import of the javascript file.
You can find out more about asset pipeline here and if not mistaken it is utilizing sprockets gem.
Refering to //= require jquery, it is importing the javascript file from your jquery gem (only if you using jQuery gem). You can find it from your jQuery gem assets folder.
Refer this screencast as it described best.
Hope it helps.
require_tree . includes all files under the directory it is in (e.g. app/assets/javascript). The jQuery source file come from the jquery-rails gem
The comment can be a little confusing. A gem is also called a "plugin" in this case. It gets from the jquery-rails gem. Note the vendor/assets/javascripts structure.
https://github.com/rails/jquery-rails/tree/master/vendor/assets/javascripts
Related
I am struggling.
I have rails 5 app with a series of js files in my app/assets/javascripts folder. The js in those files works just fine in the development environment, but when I publish on heroku, it stops working.
I can see from the chrome inspector, that the application.js file that is visible from the network tab shows the content of the js files in my app. That js just doesnt seem to do anything in production. No console errors appear from the chrome console inpsector.
I can see from this post that there are a series of things to try. I've tried all of them. I've even made a completely new app and added the js files on at a time to see if there is a tipping point where something is required in a different order to something else (mostly guessing) - but that does nothing to fix the problem.
I can see from this article that one suggestion is to:
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
and then try:
rake assets:clean assets:precompile
I've tried each of these suggestions and still can't find the problem.
If there were an error in the way I've written the js, I would expect that to be exposed in both my development and production environment console inspectors in chrome. There are no errors showing in either environment.
If there were a problem with the production environment reading the js file, I'm confused about why I can word search for the words used in the js file in the file I can open from the network tab and see the correct text.
How do I go about solving this problem?
My relevant files are:
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
// require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require cable
//= require_tree .
config/initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
config/production.rb
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
The relevant file that is not working in the production environment is saved in app/assets/javscripts/stance/commercial.js (so it should be identified in application.js by //= require_tree.
That file has:
jQuery(document).ready(function() {
jQuery('[name="organisation[commercial_attributes][standard_financial_split]"]').on('click', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden');
} else {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden').addClass('hidden');
}
});
});
Can anyone help with a process for getting js to work in the production environment?
I am out of suggestions for things to try and this isn't the sort of thing that the tutorials, code schools (I am a student in code school, go rails, udemy and have a million books), but can't find an reference point from which to start in solving this problem.
For me, the solution was to remove the javascript include tag from the header of my application.html.erb to beneath the body. That fixed the problem with the js file I referenced in my question.
However, this has now broken my google maps javascript, so I'm not sure that this is actually a good solution.
Before the deployment I had the following error in the browser console:
ReferenceError: require is not defined npm.self-...js:2:0
Despite this, javascript works perfect on my local server. When I deploy my application on heroku it doesn't, but css does, so I'm not sure that a problem caused by asset pipeline. I have
group :production do
gem 'pg'
gem 'rails_12factor'
end
in my Gemfile. I tried to precompile assets locally and even via "heroku run" command, but it didn't change anything. Here's my application.js:
// 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_tree .
//= require moment
//= require bootstrap-datetimepicker
$(function() {
$("#datetimepicker").datetimepicker({
locale: "en",
format: "lll"
});
});
$(function() {
$("#events").on("click", ".pager a", function() {
$.getScript(this.href);
return false;
});
});
And npm.js:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
If you'll ask I might share the github link. Thank you!
Sorry, don't have enough reputation to comment, or else would have.
The require() function is not built into the browser. I suggest try removing
//= require_tree .
& manually adding your javascript files(only to test, you don't get the error) like this
//= require desired_js_file
//= require_tree . pre-compiles everything in asset/javascript's root and serves to http request. And when the browser comes across a js file with require() function it probably gives you the error.
Hope this helped!
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'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.