Highlighted

AEM i18n from Javascript (try 2)

Avatar

Avatar

daitienshi

Avatar

daitienshi

daitienshi

01-11-2016

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!

Replies

Highlighted

Avatar

Avatar

leandror2195450

Employee

Avatar

leandror2195450

Employee

leandror2195450
Employee

01-11-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");

Highlighted

Avatar

Avatar

daitienshi

Avatar

daitienshi

daitienshi

01-11-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"

Highlighted

Avatar

Avatar

Anton_Smulskiy

Avatar

Anton_Smulskiy

Anton_Smulskiy

01-11-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/...

Highlighted

Avatar

Avatar

daitienshi

Avatar

daitienshi

daitienshi

01-11-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.
Highlighted

Avatar

Avatar

Anton_Smulskiy

Avatar

Anton_Smulskiy

Anton_Smulskiy

01-11-2016

  • Try to remove "-" from i18n key name.
  • Try to use CQ.I18n
  • Debug
Highlighted

Avatar

Avatar

Joseph_Rignanes

Employee

Avatar

Joseph_Rignanes

Employee

Joseph_Rignanes
Employee

01-11-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?

Highlighted

Avatar

Avatar

daitienshi

Avatar

daitienshi

daitienshi

01-11-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.
Highlighted

Avatar

Avatar

Ankur_Sial

Avatar

Ankur_Sial

Ankur_Sial

01-11-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.

Highlighted

Avatar

Avatar

daitienshi

Avatar

daitienshi

daitienshi

02-11-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