How to use i18next? Problems with translations

javascript html jquery-mobile internationalization i18next

30,254

Solution 1

Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.

Instead load it with callback:

$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);
  console.log("Sprache (root): %s", language);

  i18n.init({ lng: language, debug: true }, function() {
      // save to use translation function as resources are fetched
      $(".menu").i18n();
      $("headline").i18n();
  });
});

or use flag to load resources synchron.

By the way: Your html code has one closing </div> too many.

The call to $("headline").i18n(); should be $("#headline").i18n();.

Solution 2

    <!DOCTYPE html>
    <html>

    <head>
        <title>Basic Sample Usage</title>

        <script src="js/jquery.js" type="text/javascript"></script>   
        <script src="js/i18next.js" type="text/javascript"></script>  
    </head>

    <body>

        <h3> you can switch lng via ?setLng='lngTag' </h3>
        <a id="en" href="?setLng=en"> en </a>
            | &nbsp;
        <a id="de" href="?setLng=de"> de </a>  

        <h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>

        <h5>basic text</h5>
        <ul class="nav">
            <li class="active"><a href="#" id = "navy" data-i18n="nav.home"></a></li>
            <li><a href="#" data-i18n="nav.1"></a></li>
            <li><a href="#" data-i18n="nav.2"></a></li>
        </ul>

        <button id="btn" data-i18n="ns.common:add"></button>

        <h5>extended usage of 'data-i18n' - apply to other attributes</h5>
        <div id="extendedAttr">
            <input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
            <button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
        </div>

        <script>

        $.i18n.init({
            //lng: 'en',
            ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'},
            useLocalStorage: false,
            debug: true
        }, function(t) {

            //$('#navy').i18n(); for single 
            $('.nav').i18n();  // for group
            $('#btn').i18n();
            $('#extendedAttr').i18n();
        });



        </script>

    </body>

    </html>


locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
    "nav": {
        "home": "en home",
        "1": "en  link 1",
        "2": " en link 2"
    }, 
    "btn": {
        "hoverMe": "en hover me!"
    }
}

and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
    "app": {
        "company": {
          "name": "my company"
        }
    },
    "attr": {
        "placeholder": "de translated placeholder",
        "title": "translated title" 
    },
    "add": "de add"
}

30,254

Author by

Thomas

Updated on July 09, 2022

Comments

Thomas almost 2 years

I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?

Here my example:

index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <script src="jquery-mobile/jquery-1.6.4.min.js"       type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="js/i18next-1.5.6.min.js"                 type="text/javascript"></script>
    <script src="js/translation.js"                       type="text/javascript"></script>
  </head>
  <body>
    <div data-role="page" id="page">
    <div data-role="content">
      <div id="headline1" data-i18n="headline"></div>
        <table width="100%" border="0" id="menu1" class="menu">
          <tr id="surname">
            <td width="50%" data-i18n="menu.surname"></td>
            <td width="50%">&nbsp;</td>
          </tr>
          <tr id="firstName">
            <td width="50%" data-i18n="menu.firstName"></td>
            <td width="50%">&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Translation files: /locales/de/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "Vorname:"
  },

  "headline": "Daten:",
  "headline_1": "Daten Allgemein:",
  "headline_2": "Daten Speziell:"
}

/locales/en/translation.json

/locales/dev/translation.json

{
  "menu": {
    "surname": "Name:",
    "firstName": "First Name:"
  },

  "headline": "Data:",
  "headline_1": "Daten Common:",
  "headline_2": "Daten Specific:"
}

/js/translation.js

$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);
  console.log("Sprache (root): %s", language);

  i18n.init({ lng: language });
  i18n.init({ debug: true });
  $(".menu").i18n();
  $("headline").i18n();
});

The translation for the menu I get is "menu.name" instead of expected "Name:". For the headline I get no translation but I expected "Data:" or "Daten:".

If i try the following direct call I get no translation: i18n.t("menu.surname", { defaultValue: "Name:"});

Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?

jamuhl over 11 years

If this solved your issue you could mark this as answered. So the question get closed.
Thomas over 11 years

One more question: If I have a translation text with a mutated vowel (umlaut) than I get just a "�". If I use the HTML notation (e.g. "ä") I see the HTML notation and not the mutated vowel. What I am doing wrong? Thank you for helping.
jamuhl over 11 years

assert encoding on page and in json is utf8. <meta http-equiv="content-type" content="text/html; charset=utf-8">
Thomas over 11 years

No changes, I have still the "�" character.
Thomas over 11 years

Example: - Expected text: Fläche - Real text: Fl�che (if Fläche is the JSON text) or Fläche (if Fläche is the JSON text) I did only changed the HTML mata tag on index.html. How can I set the charset for JSON? Do I need also changes there? Currently my JSON file looks like described above.
jamuhl over 11 years

It's more a server setting: you might take a look here stackoverflow.com/questions/11363394/… (just get the json down to the client in utf-8 - not sure how to configurate your server)
Thomas over 11 years

I have no server, so maybe I need another internationalization possibility. Thank you for your help.
jamuhl over 11 years

it's not the tool. if you're serving the stuff from filesystem you might have stored the json files in some iso format instead of utf8.
gnganapath almost 9 years

For i18n with backbone.js implementation refer the below link with require.js github.com/manishcm/i18n-backbone