CODEWITHSUNDEEP
javascripthtmli18next
Amruta
Amruta

Reputation: 469

i18next is not working

I'm using phonegap and I need i18n support for this application so I ended up by choosing i18next. Below is my sample code,but i18next is failing,can anyone help me in this? The Output that I'm getting is just a list of links by name "nav.home","nav.page1","nav.page2". Moreover this sample HTML5 code is working only in Chrome and not in Mozilla.

//HTML code
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="i18next-1.6.3.js" ></script>
  <script type="text/javascript" src="translation.en.json" ></script>
  <script type="text/javascript" >
    $(document).ready(function(){
      i18n.init(function(t) {
        $(".nav").i18n();
        var appName = t("app.name");
      });
    });
  </script>
</head>

<body>
  <ul class="nav">
    <li><a href="#" data-i18n="nav.home"></a></li>
    <li><a href="#" data-i18n="nav.page1"></a></li>
    <li><a href="#" data-i18n="nav.page2"></a></li>
  </ul>
</body>
</html>

translation.en.js file

{
  "app": {
    "name": "i18next"
  },
  "nav": {
    "home": "Home",
    "page1": "Page One",
    "page2": "Page Two"
  }
}

Upvotes: 0

Views: 2308

Answers (3)

joelnb
joelnb

Reputation: 1494

Try this (not properly tested as I'm on my phone)

//HTML code
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="i18next-1.6.3.js" ></script>
  <script type="text/javascript" >
    $(document).ready(function(){
      i18n.init({ 
        resGetPath: 'translation.__lng__.json' 
      }, 
      function(t) {
        $(".nav").i18n();
        var appName = t("app.name");
      });
    });
  </script>
</head>

<body>
  <ul class="nav">
    <li><a href="#" data-i18n="nav.home"></a></li>
    <li><a href="#" data-i18n="nav.page1"></a></li>
    <li><a href="#" data-i18n="nav.page2"></a></li>
  </ul>
</body>
</html>

But I think it would be more normal to do as yarl said and rearrange into folders.

Upvotes: 0

yarl
yarl

Reputation: 3195

I see two things:

  1. English locale should be located in locales/en/translation.json
  2. You don't have to attach .json file <head> section

Upvotes: 1

m_vdbeek
m_vdbeek

Reputation: 3784

Try to do this :

$(document).ready(function(){
    $.i18n.init({
        lng: 'en'
    }, function(t) {
        $(".nav").i18n();
        var appName = t("app.name");
    });
});

I think you are missing the options dictionnary.

Upvotes: 0

Related Questions