Question

72

How to use i18next? Problems with translations

rated 0 times [ 76] [ 4] / answers: 1 / hits: 30731 / 12 Years ago, mon, october 22, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jayla

Add To Favorites

Follow

Total Points: 14

Total Questions: 96

Total Answers: 123

Location: Greenland

Member since Fri, Jul 31, 2020

4 Years ago

jayla questions

1 Typescript error Property 'value' does not exist on type 'HTMLElement', Property 'onclick' does not exist on type 'Element'

Wed, Apr 27, 22, 00:00, 2 Years ago

1 What is double question mark equal?

Wed, Feb 23, 22, 00:00, 2 Years ago

1 ReactJS onclick add or remove class to another element

Tue, Aug 18, 20, 00:00, 4 Years ago

1 Render text with HTML tags in page

Sun, Nov 17, 19, 00:00, 5 Years ago

1 How to use directive in more than one module in angular 2

Mon, Jun 24, 19, 00:00, 5 Years ago

View All

answered 12 Years ago alanisannettep · Accepted Answer

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