Home/ Questions/Q 8737229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:28:30+00:00

I want to use a internationalization option at my jQuery Mobile and jQuery webside.

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0