I'm using I18n-js gem for localiztion of js files. I've installed it with help of gem Readme and it worked for the first time.
The problem is when I add new translations to my translations.js file with rake task rake i18n:js:export translations not showing in my templates - only missing translation (development and production has same situation), although translations.js contents all the new translations.
application.js
//= require i18n
//= require i18n/translations
What did I miss? If you need more information please comment about it. Thanks
Run rake tmp:clear
I faced the same issue and this command solved it.
Unfortunately I haven't found better solution:
Add = javascript_include_tag 'translations' to the view file
remove //= require i18n/translations from application.js
Related
I'm writing a rails gem which requires angular, so I added it to my gem's dependencies:
s.add_dependency "angularjs-rails", "~> 1.6.2"
Now, how should I include angular ? I tried to add it directly in my gem's main js script but sprockets fails with this kind of error:
couldn't find file 'angular' with type 'application/javascript'
Checked in these paths:
...
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/javascripts
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/stylesheets
...
When I try to include angular in an application that uses my gem, before including my gem's script, the error is quite the same...
So should I just specify that my gem requires angularjs-rails to be added in the app Gemfile, or is there a better way to do this ?
As Richard Peck proposed, I required angularjs-rails in my gem's module file, and everything went fine:
require 'angularjs-rails'
module GridBuilder
module Rails
require 'grid_builder/rails/engine'
require 'grid_builder/rails/version'
require 'grid_builder/rails/helper'
end
end
And in my gem's js script:
//= require angular
Thank you :)
I'm trying to install this JQuery Plugin: http://coverflowjs.github.io/coverflow/tutorial/get-started/
I'm relatively new to rails, and not sure how to implement a JQuery plugin without a Gem. (And not comfortable trying to create a gem at this point)
Can someone please assist in laying out a step-by-step breakdown of how they would go about installing this plugin?
Really appreciate any help.
You should use rails-assets.org, which wraps bower components into ruby gems on the fly. Find the equivalent library in bower and then use the gem it creates.
Coverflow is available at https://rails-assets.org/#/components/coverflow
Follow below steps:
Download latest jquery file using link https://code.jquery.com/jquery-3.1.1.min.js
Add file under /assets/javascript folder
OR
Add below code under app/views/layouts/application.html.erb
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
You just try this..
You can download the plugin and save it in vendor/assets/javascripts. Then you include it on application.js
//In (for example) application.js
//= require jquery
or in some added file like
<%= javascript_include_tag 'jquery' %>
You can do these steps as below:
download coverflowjs library and put it inside app/assets/javascripts/ or you can put it inside vendor/assets/javascripts/
in your file application.js, you only put this line.
//= require coverflowjs
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.
I'm trying to get Angular to load a template:
var app = angular.module("myApp", ['templates'])
and my html:
<div ng-app="myApp">
<div ng-include="'blah.html'"></div>
</div>
But all I get is a 404 Failed to load resource because, Rails tells me, No route matches [GET] "/blah.html". I understand that this is because of the asset pipeline in Rails. blah.html is in /app/assets/javascripts/templates/blah.html and I am using the angular-rails-templates gem to try to solve the problem. So my application.js has:
//= require angular-rails-templates
//= require_tree ./templates
But I'm not having any luck.
The html generated suggests that angular-rails-templates is loading (it has a script /assets/angular-rails-templates....js) but rails is failing to find blah.html
Versions:
rails 4.2.1
angular-rails-templates 0.1.4
angularjs 1.3.15
This turned out to be a sprockets incompatibility (see here and here)
The short version is:
Add gem 'sprockets', '2.12.3' to your Gemfile
Run bundle update sprockets
[Update]
I'm no expert on this stuff but it does seem that a number of people smarter than I are suggesting using /public/templates. You may want to bear this in mind.
I had a similar issue - In my haste, I neglected to fully read the directions, and missed step 3.
Adding a Dependency in the Angular Application Module solved it for me, and the templates are served through the asset pipeline...
//= require angular-rails-templates
//= require_tree .
angular.module('d-angular', ['templates'])
I put my angular template files under public/templates which is accessible via <site root>/templates without any additional configuration.
After struggling for an hour to get this, I realized that I had a JavaScript file sharing the same name.
For example, these files will cause conflict:
component.js
component.html.haml
So I made sure to rename the JavaScript file to something like:
component-directive.js
component.html.haml
I've been struggling on the same problem today, and I think I have found a solution for this problem.
try
<div ng-include="'assets/blah.html'"></div>
OR
<div ng-include="'assets/templates/blah.html'"></div>
instead of
<div ng-include="'blah.html'"></div>
This solved the problem for me.
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