i18next Displayed key instead of value

Question

I have translation.json file in /locales/en/

{
    "app": {
        "name": "Example App"
    }
}

In html, I have:

<a href="/" data-i18n="app.name">

In js:

$(document).ready(function() {

    var language_complete = navigator.language.split("-");
    var language = (language_complete[0]);

    console.log('language', language);

    $.i18n.init({
        lng: language,
        fallbackLng: false,
        debug: false
    }, function() {
        $('a').i18n();
    });
});

It displayed app.name instead of Example App. What i missed in my code? Thanks

Do you include the jQuery version of i18next? :) – AndreM96 Aug 16 '13 at 14:48 — AndreM96, Aug 16 '13 at 14:48
same problem here, how did you solve it? thanks.. – delkant Aug 24 '13 at 03:25 — delkant, Aug 24 '13 at 03:25

score 1 · Answer 1 · edited Apr 27 '20 at 10:30

1

as of i18next V2, the backend is no longer provided out of the box (see the migration guide), so you're required to define a backend configuration in the init block:

backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
},

if you don't do that, your resources will not be loaded, and translation values will fallback to their respective keys (see the source code).

edited Apr 27 '20 at 10:30

Vebjorn Ljosa

17,438
13
70
88

answered Jun 03 '16 at 01:40

Eliran Malka

15,821
6
77
100

score 0 · Answer 2 · answered Aug 24 '13 at 03:47

0

You have to set useLocalStorage and useDataAttrOptions to true

$.i18n.init({useLocalStorage: true , useDataAttrOptions:true, ....});

answered Aug 24 '13 at 03:47

delkant

2,304
1
29
28

score 0 · Answer 3 · edited Jan 31 '17 at 15:57

0

In js it's because $(document).ready doesn't wait for external contents to be loaded. You need to use $(window).on('load',function(){...}).

edited Jan 31 '17 at 15:57

Donald Duck

8,409
22
75
99

answered Jan 31 '17 at 15:14

Morgane

1

i18next Displayed key instead of value

3 Answers3

Linked