How to load I18n translations dynamically?

[Christian Schlaefcke]

Hi,

for my plugin I need to dynamically load language options for a select list on my dialog. The entries of the select list should be loaded and translated with I18n like this

//An array like: de,gb,fr,es
var availableLanguageKeys = AJS.I18n.getText("my-plugin.available_languages").split(',');
var availableLanguagesMap = {};
$.each(availableLanguageKeys, function( languageIndex, languageKey ) {
    //Map the language key (de) to the translated name of the Language (Deutsch, German, Allemagne, Almania), (Englisch, English, Anglais, Inglés), etc.
    availableLanguagesMap [languageKey] = AJS.I18n.getText(languageKey);
});

<select class="select" id="page-language" name="page-language">
    <option>{getText('my-plugin.available-languages.please_select')}</option>
    {foreach $languageKey in keys($availableLanguagesMap)}
        <option value="{$languageKey}">{$availableLanguagesMap[$languageKey]}</option>
    {/foreach}
</select>

I tried to achieve this in my soy template with {getText('my-plugin.available-languages.de')} method and with javascript/jQuery AJS.I18n.getText('my-plugin.available-languages.de');

When I use it with a hard coded key it works but it lacks the required dynamics of the select field options. When I try to load it with a variable the soy method does not work at all (Error) and the AJS.I18n.getText() method just returns the key (my-plugin.available-languages.de).

var deLangVal = AJS.I18n.getText("my-plugin.available-languages.de");
var deLangVal = "Deutsch";

var deLangKey = "my-plugin.available-languages.de";
var deLangVal = AJS.I18n.getText(deLangKey);
var deLangVal = "my-plugin.available-languages.de";

Is there any way of lazy-loading I18n expressions with soy or javascript/jQuery?

Thank you for any hint in advance!

Regards,

Christian

[Christophe Promé]

It might be a bit late but I came across a similar issue...

Are you using the i18n transformer ?

<transformation extension="js">
    <transformer key="jsI18n"/>
</transformation>

If yes, this behaviour is to be expected.

The transformer replaces each occurence of AJS.I18n.getText(KEY) found in the javascript files with the translation found in the i18n .properties files.

This translation is done server side, where the key is not computed yet.

As a workaround, you could move the translation browser side to do it dynamically. As a caveat, you will have to send all your i18n files to the browser. And  I don't know how to do that...

Cheers,

Christophe

[Jonas Krispin]

I'm even later, but in case someone stumbles upon this 

Found a Solutions here

• call AJS.I18n.get('your.plugin.key') with your code as callback
  signature is get(pluginKey, successCallback, errorCallback)
• within the successCallback you can use AJS.i18n.getText(...) as expected

The i18n Transformer does not work in this scenario since it has some specific requirements (see bottom of the page) since it processes the JS on the backend, before JS kicks in to be able to set the keys dynamically.

[Andrei]

It seems that AJS.I18n.get is deprecated (but what isn't deprecated or experimental?...)

* @deprecated Since 5.7. I18n translations are not performed using a web-resource transformer by regex'ing for
 * usages of AJS.I18n.getText('i18n.key') and replacing them with the appropriate translated string. This code can
 * safely be removed if no Javascript references remain to AJS.I18n.keys, AJS.I18n.get() and AJS.I18n.load()

I assume the text should say "I18n translations are now performed" instead of "I18n translations are not performed".