i18next translation problems

StackOverflow https://stackoverflow.com/questions/13265575

Question

I still try to use i18next for translations of my jQuery application. After some general problems (solved here: How to use i18next? Problems with translations) and there solution I wanted to translate all my visible text. But here I got problems and I need help to solve this. I hope someone can help me.

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset="UTF-8">

   <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css"      rel="stylesheet" type="text/css"/>
   <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css"  rel="stylesheet" type="text/css"/>

   <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>
      <!-- Page Start -->
  <div data-role="page" id="start" data-theme="e">
    <div data-role="header" data-position="fixed" data-theme="e">
      <h1 data-i18n="startHeader"></h1>
    </div>
    <div data-role="content">  
        <a href="#page1" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA1"></a>
        <a href="#page2" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA2"></a>
        <a href="#page3" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="buttonA3"></a>
    </div>
  </div>

  <div data-role="page" id="page1" data-theme="e">
    <div data-role="header" data-position="fixed" data-theme="e">
      <a href="#start" data-icon="delete" data-i18n="buttonCancel1"></a>
      <h1 data-i18n="header1"></h1>
    </div>
    <div data-role="content">  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button1"></a>  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button2"></a>  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button3"></a>  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button4"></a>  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button5"></a>  
        <a href="#start" data-icon="arrow-r" data-iconpos="right" data-role="button" data-i18n="button6"></a>
    </div>
  </div>

  <div data-role="page" id="page2"  data-theme="e">
    <div data-role="header"  data-theme="e" data-position="fixed">
      <a href="#start" data-icon="delete" data-i18n="buttonCancel2"></a>
      <h1 data-i18n="header2"></h1>
    </div>
    <div data-role="content">&nbsp;</div>
  </div>

  <div data-role="page" id="page3"  data-theme="e">
    <div data-role="header"  data-theme="e" data-position="fixed">
      <a href="#start" data-icon="delete" data-i18n="buttonCancel3"></a>
      <h1 data-i18n="header3"></h1>
    </div>
    <div data-role="content">&nbsp;</div>
  </div>
</body>
</html>

js/translations.js

$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);  
  i18n.init({ lng: language, debug: true }, function() {
    $(".menu").i18n();
    $("#startHeader").i18n();
    $("#buttonA1").i18n();
    $("#buttonA2").i18n();
    $("#buttonA3").i18n();
    $("#header1").i18n();
    $("#header2").i18n();
    $("#header3").i18n();
    $("#buttonCancel1").i18n();
    $("#buttonCancel2").i18n();
    $("#buttonCancel3").i18n();
    $("#button1").i18n();
    $("#button2").i18n();
    $("#button3").i18n();
    $("#button4").i18n();
    $("#button5").i18n();
    $("#button6").i18n();
  });
});

/locales/de/translation.json

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

  "startHeader":            "Willkommen",
  "buttonA1" : "A1",
  "buttonA2" : "A2",
  "buttonA3" : "A3",
  "header1" : "Überschrift 1",
  "header2" : "Überschrift 2",
  "header3" : "Überschrift 3",
  "buttonCancel1" : "Abbruch",
  "buttonCancel2" : "Abbruch",
  "buttonCancel3" : "Abbruch",
  "button1" : "Klick mich 1",
  "button2" : "Klick mich 2",
  "button3" : "Klick mich 3",
  "button4" : "Klick mich 4",
  "button5" : "Klick mich 5",
  "button6" : "Klick mich 6",
}

/locales/en/translation.json
/locales/dev/translation.json 

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

  "startHeader":            "Welcome",
  "buttonA1" : "A1",
  "buttonA2" : "A2",
  "buttonA3" : "A3",
  "header1" : "Headline 1",
  "header2" : "Headline 2",
  "header3" : "Headline 3",
  "buttonCancel1" : "Cancel",
  "buttonCancel2" : "Cancel",
  "buttonCancel3" : "Cancel",
  "button1" : "Click me 1",
  "button2" : "Click me 2",
  "button3" : "Click me 3",
  "button4" : "Click me 4",
  "button5" : "Click me 5",
  "button6" : "Click me 6",
}

The menu translation still works, so I skipped this part from index.html.

Additional question: Is it possible to translate all text with same content at one time? Examples are the cancel buttons which are currently translated separately.

Thanks in advance for your help.

Thomas

Was it helpful?

Solution

You can nest your translations - like building a glossary.

// given resources
{
     dev: { translation: { nesting1: '1 $t(nesting2)' } },
     en: { translation: { nesting2: '2 $t(nesting3)' } },            
     'en-US': { translation: {  nesting3: '3' } }
};

i18n.t("nesting1"); // -> 1 2 3

http://i18next.com/pages/doc_features.html#nesting

or just give every cancel button the same key?

$("#buttonCancel1").i18n();
$("#buttonCancel2").i18n();
$("#buttonCancel3").i18n();

<a id="#buttonCancel1" href="#start" data-icon="delete" data-i18n="cancel"></a>
<a id="#buttonCancel2" href="#start" data-icon="delete" data-i18n="cancel"></a>
<a id="#buttonCancel3" href="#start" data-icon="delete" data-i18n="cancel"></a>

{
  "cancel" : "Cancel"
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top