Rails: Internationalization of Javascript Strings?

Question

So, we have an existing Rails 2.3.5 app that does not support Internationalization at all. Now, I'm well familiar with Rails I18n stuff, but we have a LOT of output strings inside /javascripts/. I'm not a huge fan of this approach, but unfortunately it is too late to fix it now.

How might we internationalize strings stored in JS files in a Rails app? Rails doesn't even serve the JS files...

I'm thinking I could always have the Rails app serve up the JS files, but that seems pretty gross. Are there plugins to do this?

rmontgomery429 · Accepted Answer · 2012-12-17 22:22:13Z

107

Why not something simple like:

<script type="text/javascript">
  window.I18n = <%= I18n.backend.send(:translations).to_json.html_safe %>
</script>

Then in JS you can do things like:

I18n["en-US"]["alpha"]["bravo"];

I've wrapped mine in an application helper.

def current_translations
  @translations ||= I18n.backend.send(:translations)
  @translations[I18n.locale].with_indifferent_access
end

Then my call in my application.html.erb looks like this:

<script type="text/javascript">
  window.I18n = <%= current_translations.to_json.html_safe %>
</script>

This allows you to avoid having to know the current locale in JavaScript.

I18n["alpha"]["bravo"];

Or

I18n.alpha.bravo;

edited Dec 17, 2012 at 22:22

answered May 15, 2012 at 23:48

rmontgomery429

14.9k17 gold badges63 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Linus Oleander Over a year ago

Works perfect, thanks. I also implemented this t method to make it more railsish. gist.github.com/6a3f1b3a4cf8de889e34 t("products.price");

Emmanuel Over a year ago

I just spent an jour trying to make i18n-js work... your solution is way more simple and worked immediately !

rmontgomery429 Over a year ago

You don't need to include the entire file when you "load" the translations. I18n.backend.send(:translations) returns a hash so you could scope the translations with something like I18n.backend.send(:translations)["alpha"] which would only load the section you need.

nornagon Over a year ago

I have no idea why i18n-js is so complicated. This works fantastically (even precompiles!), and will be easy to split up and extend when I eventually need to. Thanks!

Vipin Verma Over a year ago

how to use this for translations like this showing_text: "Showing %{entry_name} Choices"

|

Felipe Elias Philipp · Accepted Answer · 2012-02-16 09:52:20Z

21

Balibu is abandoned. Use i18n-js: https://github.com/fnando/i18n-js

answered Feb 16, 2012 at 9:52

Felipe Elias Philipp

5944 silver badges6 bronze badges

Comments

life_like_weeds · Accepted Answer · 2013-09-18 02:03:09Z

9

Ryan's solution above is perfect, except the backend needs to be initialized if it hasn't been already.

I18n.backend.send(:init_translations) unless I18n.backend.initialized?
# now you can safely dump the translations to json

answered Sep 18, 2013 at 2:03

life_like_weeds

1311 silver badge4 bronze badges

1 Comment

hammady Over a year ago

I was stuck when translations was returning empty hash until I read your answer! Thanks

Community · Accepted Answer · 2017-05-23 10:31:07Z

6

Why not simply this in your Javascript file:

var a_message = "<%= I18n.t 'my_key' %>"

For this to work, you must add .erb to your Javascript file's extension.

You might also need to add the following line at the top of your Javascript file if you aren't using ruby >= 2.0.

<%# encoding: utf-8 %>

See the last comment of the accepted answer in this thread for more info: Encoding issues in javascript files using rails asset pipeline

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jun 25, 2013 at 19:57

user1026130

1 Comment

StingeyB Over a year ago

One big reason this will be difficult is asset precompilation. When the asset gets precompiled, the javascript will be put in the public directory with your default directory translations. You'd have to make that asset compile on demand. Not saying it's wrong, but there's some definitely gotchas.

Vince V. · Accepted Answer · 2013-10-19 15:29:20Z

6

For rails 3 applications you could do this:

Create a i18n.js.erb file and add it to your application.js. And add this piece of code into the file.

<%
@translator = I18n.backend
@translator.load_translations
@translations ||= @translator.send(:translations)[I18n.locale][:javascript]
%>

window.I18n = <%= @translations.to_json.html_safe %>

I also scope my translations to not have a huge javascript file. My scope is :javascript.

Hope it helps someone!

answered Oct 19, 2013 at 15:29

Vince V.

3,1413 gold badges33 silver badges48 bronze badges

1 Comment

Artem P Over a year ago

This solution has two problems: 1. In production locale always will be same because assets compiled 2. You need to clear tmp/cache every time you change translations in yml.

macler · Accepted Answer · 2013-06-05 11:31:35Z

3

Ryan solution is brillant. But to not include the entire file you should use: @translations[I18n.locale].with_indifferent_access["alpha"] instead of I18n.backend.send(:translations)["alpha"]

answered Jun 5, 2013 at 11:31

macler

1214 bronze badges

Comments

sblom · Accepted Answer · 2010-04-23 20:22:40Z

2

Babilu is a Rails plugin that does this for you.

answered Apr 23, 2010 at 20:22

sblom

27.5k4 gold badges74 silver badges96 bronze badges

Comments

Simo · Accepted Answer · 2014-05-24 00:40:46Z

Another option that could be helpful:

Supposing that you have a model Language (slug) that contains all your available languages. It handles the cases when a there's a missing translation (it's replaced by the default locale version)

assets/javascript/i18n.js.erb

<%
@translator = I18n.backend
@translator.load_translations

translations = {}
Language.all.each do |l|
    translations[l.slug] = @translator.send(:translations)[l.slug.to_sym]
end

@translations = translations

%>
window.I18n = <%= @translations.to_json.html_safe %>

window.I18n.t = function(key){
    if(window.I18n[current_locale]){
        el = eval("I18n['"+current_locale+"']." + key);
    }
    if(window.I18n[default_locale] && typeof(el) == 'undefined'){
        el = eval("I18n['"+default_locale+"']." + key);
    }
    if(typeof(el) == 'undefined'){
        el = key;
    }
    return el;
};

views/layout/application.html.erb

...
<%= javascript_tag "var current_locale = '#{I18n.locale.to_s}';" %>
<%= javascript_tag "var default_locale = '#{I18n.default_locale}';" %>
...

In you javascript code, you can translate like this:

// current_locale:fr , default_locale:en

// existing translation (in french) 
I18n.t('message.hello_world'); // => Bonjour le monde

// non-existing translation (in french) but existing in english 
I18n.t('message.hello_this_world'); // => Hello this world

// non-existing translation (french & english) 
I18n.t('message.hello_this_new_world'); // => message.hello_this_new_world

Hope that it helps!

robbie613 · Accepted Answer · 2013-10-13 21:04:44Z

0

I18n-js is working great for me and i'd recommend it. If you use his rewrite branch then the plugin will include a /assets/i18n/filtered.js file which outputs exactly what @ryan-montgomery answered, without having to do anything yourself manually.

This way, you can use the same translations on the backend with Rails helpers t(:key) and using I18n.t('key') in Javascript on the frontend.

answered Oct 13, 2013 at 21:04

robbie613

6751 gold badge10 silver badges8 bronze badges

Comments

Johann Echavarria · Accepted Answer · 2013-10-14 00:14:44Z

0

For applications like the one you described "that does not support Internationalization at all" and "is too late to fix it now" I wrote a very quick approach: the jQuery plugin Quick-i18n: https://github.com/katio/Quick-i18n demo (and how to use it): http://johannpaul.net/Quick-i18n/

answered Oct 14, 2013 at 0:14

Johann Echavarria

9,9654 gold badges28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Rails: Internationalization of Javascript Strings?

10 Answers 10

11 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

assets/javascript/i18n.js.erb

views/layout/application.html.erb

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

11 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

assets/javascript/i18n.js.erb

views/layout/application.html.erb

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related