gettext_i18n_rails_js not working - javascript

I already have these two gems in my application
gem 'faraday'
gem 'gettext_i18n_rails'
i wanted to get translations in my js file which resides in assets folder.
so i added gem
gem "gettext_i18n_rails_js", "~> 1.2.0"
and followed the guidelines in https://github.com/webhippie/gettext_i18n_rails_js. I didn't add any config files since i follow window.__ function. i called like this
window.__('sign_in.twitter')
in my js file but its throwing
Uncaught TypeError: window.__ is not a function
this error. Tried adding the config files as given in the documentation. Still not working. Please help.

Did you add following line to your js manifest?
//= require gettext/all
gettext/all.js is the file where window.__ function is defined. Check if it is really loaded.

Related

Rails gem with javascript dependency

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 :)

Incorporating vendor js files (from wrap bootstrap) into Rails 4

I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// 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')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.
Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.

javascript functions available via javascript_include_tag but not asset pipeline and application.js

My apologies if this has been posted somewhere else, but I'm not exactly sure how to even phrase a search for this problem.
Basically, I've got fullcalendar.js sitting in app/assets/javascripts/. Within my application.js file (in the same folder of course) I've got the following...
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
So, as expected the fullcalender.js gets swept up in the asset compiling process and ends up in the application.js that is then served to the user.
The problem comes in when I try to reference a function defined in fullcalendar.js (and thus defined in application.js after compiling the assets) it throws an error stating TypeError: $(...).fullCalendar is not a function in the js console of firebug, and of course full calendar doesn't render.
Now, however, if I include <%= javascript_include_tag "fullcalendar.js" %> in the layout file after all of the other scripts and stylesheets have been pulled in, it works as expected.
Baffled, I looked into the js in each file and compared them and can't see a difference. Is there something going on with the asset pipeline that I'm not aware of or is this some freaky DOM issue? I just have no idea at this point.
For reference, here are the contents of both the application.js and fullcalendar.js that are linked to in the page source of the site. I've only included the relevant full calendar portion of each, as it's too large for gist or pastebin if I include everything.
What baffles me is that both the sources come from the same file, one is just linked to directly, the other flows through the asset pipeline process.
application.js - http://pastebin.com/byyNErB8
fullcalendar.js - http://pastebin.com/k4p29YmP
Any insight or help would be GREATLY appreciated.
Maybe a dependency error. I'll suggest you to use a better practice for such lib.
Put the fullcalendar scripts into vendor/assets/javascripts
Require this script manually in application.js before the tree and after jquery and any other lib it depends.
/=require 'fullcalendar`
Add
Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.

use javascript in rails 3.2 without coffeescript

I'm using Rails 3.2, It's set up for coffeescript. I know Coffeescript is an awesome language and it's not too hard to learn, but i'm JUST starting to wrap my head around Javascript and jQuery. So my question is this: Is there an easy way to set rails 3.2 up to use Javascript instead?
At the moment, my jQuery is in <script></script> tags in my view (timeline/index.html.erb). I'd like to move it into a .js file. I tried changing the name of my timeline.js.coffee to just timeline.js and putting the jQuery in there, but I get Uncaught SyntaxError: Unexpected token ILLEGAL.
What should I do besides the obvious answer of "learn coffeescript"?
I was on the right track. To switch to javascript in rails 3.2 you only need to remove the .coffee extension. However, you also need to make sure you use // for comments instead of #
//# Place all the behaviors and hooks related to the matching controller here.
//# All this logic will automatically be available in application.js.
//# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
Manifest Files and Directives
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
add js files in app/assets/javascripts, then add the files in application.js
your js file
alert("here");
application.js
//= require_tree .
or
//= require your_js_file_name
then, it will be picked up from the code below in your app/views/layouts/application.html.erb
<%= javascript_include_tag "application" %>
$ rails -v
Rails 3.2.11
how about this?
http://bit.ly/VHEnBX
git clone it
cd js_test
bundle
rails s -d
open http://localhost:3000
# stop the detached server
kill -9 `cat tmp/pids/server.pid`
you should see here alert from the browser.
it's just a simple js file. no .coffee extension or whatsoever.
http://bit.ly/UPe2mp
you can simply comment out gem 'coffee-rails' in your Gemfile

how does require jquery work in Rails 3 app?

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

Categories