Translate custom attributes with i18next (placeholder, value)

Question

I am investigating what is possible with i18next localization library.

Right now I have the following code (full Fiddle is here):

HTML

<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>

JS

$(document).ready(function () {
    i18n.init({
        "lng": 'en',
        "resStore": resources,
        "fallbackLng" : 'en'
    }, function (t) {
        $(document).i18n();
    });

    $('.lang').click(function () {
        var lang = $(this).attr('data-lang');
        i18n.init({
            lng: lang
        }, function (t) {
            $(document).i18n();
        });
    });
});

It translates all text elements, but the problem is that I can not translate custom attributes. For example text inside the div is translated, but I can not understand how can I translate custom attributes like placeholder and value.

Another problem is with my way of translation. Whenever a button Chi, Eng is clicked, I am initializing the translation (but I am not sure this is a correct way). Edit I think I found how to solve this problem (I need to use setLng): i18n.setLng(lang, function(t) { ... })

Paint

Answer 1

After asking i18next creator this question directly, I received the following reply: all I need is to put my custom attribute in front of the translation element. Here is an example:

<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">

If multiple attributes are needed, separate them by a ;.

I learned 2 things by this:

• I have to read better documentation.
• 118next's creator is really helpful (this is a thank you remark for him).

Paint

Suppose, that we've something like this: <div id="dropdown" class="user_reg"> <select id="country_list" class="selectpicker" data-width="100%" data-size="5" data-live-search="true" required="required"> <option value="" disabled class="country_list">Country</option> </select> </div>, then how do we translate Country? – Uigur

@AjayKulkarni in your example here country is not an attribute. – Paint

Yeah, so I tried out this code: <option id="country" value="" disabled class="country_list">Country</option> and $('#country').text($.t('app.country'));. It worked – Uigur

awesome! I expected this to be long winded and fiddly – Monodrama

also stated in the docs: github.com/i18next/jquery-i18next – Brutalize

there's also a newer blog post tutorial: locize.com/blog/jquery-i18next – Brutalize

Answer 2

For me the following worked

<input data-i18n="[placeholder]placeTransl" value="name">

So just enter the attribute's name between [] and then the translation.

Geomorphology

Oh sorry, I didn't get your answer <input placeholder="[placeholder]placeTransl" value="name"> to work. I had to use the data-i18n attribute to get it to work. – Geomorphology

oh sorry, I have not noticed that your answer is different. Really sorry for this. +1 – Paint

No problems! Your answer pointed me in the right direction, so thanks! – Geomorphology

I know it's been a while but this doesn't seem to work anymore. Is anyone still using it successfully? – Nowhither

Answer 3

Consider calling

$('body').i18n()

inside .done() function. You should tell where to look for localizer. This will work without having to call [placeholders] in the data-i18n attribute.

Bohun