How to use i18next? Problems with translations

html, i18next, internationalization, javascript, jquery-mobile

Solution

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();`.

Problem

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?

Original source