I18n Translation Of Dynamically Added Text

Just got started with i18n for translating my website in Node. I'm at a bit of a loss of how to translate text that is generated after the DOM has loaded and jade file rendered (li

Solution 1:

1. I suggest starting here: https://www.npmjs.com/package/i18n-express in this page you'll find a starting explanation with this package which I recommend.

2. The JSON file should hold the translated key/value strings (no matter which level its on).

3. Working solution:

What I want to do is to be able to translate text that has been generated by JavaScript on the client side.

In this case you'll need to manipulate existing data in the template(view), because i18 module runs on the server-side.

For example you can store the translated text later-to-inject to this very button inside a data-sent attribute like this:

//-INDEX.JADE
form.feedback-r
    a#submitclientiddd.button.button-primary(data-reply-text='#{i18n.__('Reply')}', data-sending-text='#{i18n.__('Sending')}') #{i18n.__('Reply')}

//-CLIENT SIDE JSvar sending_text = $('a#submitclientiddd').attr('data-sending-text');
$("#posts").on("submit", "form.feedback-r", function(e) {  actbutton.text(sending_text); });

//-AJAX FUNCTION REQUEST AND ON SUCCESS var reply_text = $('a#submitclientiddd').attr('data-reply-text');
actbutton.text(reply_text); //(back to reply text)

Solution 2:

I managed to solve this by installing browser-i18n to my public javascript folder (not via NPM), and then using the same functions client-side as with i18n on Node.

The only problem is that browser-i18n looks like it doesn't support ranged values, like: [0] Reply | [1,] Replies. i18n-for-browser may be a possible solution.