i18next tips

change_attr.md

Issue

When message/label is translated and written directly to the HTML tag, switching to other language will not re-translate such HTML tag.

Wrong way

1. Execute the following JavaScript to put English message.

    $('dispMsg').html(i18next.t("msg.error.fileNotFound");
   

2. Result.

    <div id="dispMsg">File not found.</div>
   

3. Change to Japanese.

    i18next.changeLanguage("ja");
    $('[data-i18n]').localize(); // need jQuery-i18next
   

4. Result (not translated).

    <div id="dispMsg">File not found.</div>
   

Proper way

1. Execute the following JavaScript to put English message into the div's attribute.

    $('#dispMsg').attr("data-i18n", "msg.error.fileNotFound")
        .localize();
   

2. Result.

    <div id="dispMsg" data-i18n="msg.error.fileNotFound">File not found.</div>
   

3. Change to Japanese.

    i18next.changeLanguage("ja");
    $('[data-i18n]').localize();
   

4. Result (translated).

    <div id="dispMsg" data-i18n="msg.error.fileNotFound">ファイルがないです。</div>