AEM i18n from Javascript (try 2) | Community
Skip to main content
daitienshi
daitienshi
Level 2
November 1, 2016

AEM i18n from Javascript (try 2)

  • November 1, 2016
  • 6 replies
  • 15996 views

Apologies for the duplicate post. Seems like something in the original is breaking the page, so I'll try this again:

I'm trying to dynamically retrieve a translated message using Javascript from my created dictionary in AEM's translator (/libs/cq/i18n/translator.html).

We've got dictionary values set up like:

String               EN                  FR
========================================================
TEST-001        This is a Test1     FR:This is a Test1
TEST-002        This is a Test2     FR:This is a Test2
TEST-003        This is a Test3     FR:This is a Test3

I've looked through the Internationalizing UI Strings article (https://docs.adobe.com/docs/en/aem/6-2/develop/components/i18n/i18n-dev.html) but when I try to the following:

Granite.I18n.setLocale("en");
Granite.I18n.get("TEST-001");
or

Granite.I18n.setLocale("fr");
Granite.I18n.get("TEST-001");


I only get returned the string I've passed in (i.e. "TEST-001").

Could someone help me understand how to retrieve the translated value back?

Thanks!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

6 replies

L
Adobe Employee
lreis1Adobe Employee
Adobe Employee
November 1, 2016

I'm not sure about the relationship between "String" and "EN" here, as the English string is typically the key. What do you get if you do:

Granite.I18n.setLocale("fr");
Granite.I18n.get("This is a Test1");

daitienshi
daitienshiAuthor
Level 2
November 1, 2016

Hi Leandro,

The relationship between String and EN is based on the translator library found in /libs/cq/i18n/translator.html.

The String value is normally used as the lookup key in JSP or Sling and the EN is the actual translated value being returned if the locale is EN.

Regardless, if I pass the "This is a Test1" string into the Granite.I18n.get() function, with the locale set to FR, I still get back "This is a Test1"

Anton_Smulskiy
Anton_Smulskiy
Level 3
November 1, 2016

Have you checked if your i18n works on JSP/Java? If it works there - I have no answer.

If not - make sure use set your dictionary correctly under /apps/your-app/i18n. 

Also, your page should be under /content/your-app/...

daitienshi
daitienshiAuthor
Level 2
November 1, 2016
Hi Anton, Yes, I'm able to successfully use i18n using JSP, but we're looking to dynamically retrieve the string via javascript rather than preloading the string on page render.
A
Ankur_Sial
Level 2
November 2, 2016

Hi Daitienshi,

Consolidated i18n dictionaries are cached in the system. Therefore, addition of an entry may not reflect immediately. Does the dictionaries loaded at runtime have the keys TEST-001, TEST-002 and TEST-003 ? 

Also, in case the keys are missing, one could update the cache by restarting the bundle - org.apache.sling.i18n.

A
Ankur_Sial
Level 2
November 2, 2016

Hi Ankur,

The dictionaries do have the keys TEST-001, TEST-002, TEST-003 during runtime, as I can retrieve those values via JSP.  I can even modify the values and see those changes come in via JSP after a page refresh


Hi Daitienshi,

I tried the following steps

  1. Add keys in translator.html
  2. I18n.get("TEST-001"); returns "TEST-001" in both js and jsp
  3. Restart bundle org.apache.sling.i18n.
  4. I18n.get("TEST-001"); returns expected string in both js and jsp

Please let us know in case I am missing something. Also, please try restarting the bundle.

-
Adobe Employee
-Joe-Adobe Employee
Adobe Employee
November 2, 2016

Hi,

Do you see any errors from your browser?

The Javascript implementation will need to retrieve the dictionary as JSON via an Ajax request. You should see a request to something like /libs/cq/i18n/dict.fr.json.

Can you check this url returns the expected information?

daitienshi
daitienshiAuthor
Level 2
November 2, 2016
Hi Joseph, How would I request the dictionary via AJAX? I can call Granite.I18n.getDictionary() and get an object back but I have no clue what this object is (have tried a bunch of the functions it has defined) but still can't get anything out of it.
S
shiva76076
April 12, 2021

Hope this might help someone looking for solution.

 

This has worked for me:

var pageLang = new java.util.Locale(currentPage.getLanguage(false).getLanguage());
var resourceBundle = request.getResourceBundle(pageLang);
var i18n = new com.day.cq.i18n.I18n(resourceBundle);

 

i18n.get("String that needs to be translated")

Terms & ConditionsAccessibility statement

Loading footer...