i18next-browser-languageDetector not working on IE 11 about i18next-browser-languagedetector

[jamuhl]

Can you please check in your IE

https://locize.com?lng=de
https://locize.com?lng=en

On my IE11 (browserstack) that works...and it uses same detector

[jamuhl]

Not working means?

[jamuhl]

@AlexanderReichl why does your page reload when changing the language? What does your code look like to change language?

[jamuhl]

hm...than it's really hard to say where it goes wrong on your app. is the querystring param really there on init time of i18next after reload?

[jamuhl]

Best might be you debug the detection logic

[jamuhl]

Would temporary not use the .min - but yes

[AlexanderReichl]

Ok I'll do so and get back to you, as soon as I discovered anything.

Many thanks!

[jamuhl]

this line: https://github.com/i18next/i18next-browser-languageDetector/blob/master/i18nextBrowserLanguageDetector.js#L91

[jamuhl]

i18next.changeLanguage('de') or setting it on init lng: 'de'

[AlexanderReichl]

Yep, that was the solution.

The issue was the sort of single page architecture of the site. And in IE11 the redirect seemed to reload all Javascript like it is an initial start of the page.

Thank you so much! Have a nice weekend.

[jamuhl]

changeLanguage is async...change it to:

$("#lng_en").click(function() { i18next.changeLanguage('en', function(err) { $('body').localize(); } ); });

[jamuhl]

No IE to work with currently...but should work...does it log some error in console?

[vanthai26]

I think the problem is IE11 will only return the language of which it was installed, in this case it will always be in "en-US" when this line is called "if (navigator.userLanguage)" in navigator.js.
Is there no reliable "client-side only" solution for this?

[jamuhl]

If i remember right - language is whatever is set in IE settings languages. Nothing to do with what is was when installing. Users can change that to whatever is correct to them.

[nikhil4326]

What is solution for IE11. its not working with me too

[nikhil4326]

Translations are not appearing in IE11 browser only. Below is my code.

var options ={
  // order and from where user language should be detected
  order: ['navigator', 'cookie', 'localStorage', 'querystring', 'htmlTag'],

  // keys or params to lookup language from
  lookupQuerystring: 'lng',
  lookupCookie: 'i18next',
  lookupLocalStorage: 'i18nextLng',

  // cache user language on
  caches: ['localStorage', 'cookie'],
  excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)

  // optional expire and domain for set cookie
  cookieMinutes: 10,
  cookieDomain: 'myDomain',

  // optional htmlTag with lang attribute, the default is:
  htmlTag: document.documentElement
}

i18n
  .use(LngDetector)
  .init({
	  detection: options,
    // we init with resources
    resources: {
      en: {
        translations: trans_en
        
      },
      es: {
        translations: trans_es
        
      }	
    },
    fallbackLng: 'en',

    // have a common namespace used around the full app
    ns: ['translations'],
    defaultNS: 'translations',

    keySeparator: false, // we use content as keys

    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ','
    },

    react: {
      wait: true
    }
  });

[jamuhl]

Any warning / error in console?

[nikhil4326]

No error/Warning, is the above code correct for IE browser?

[jamuhl]

does it work in chrome..than it's ok...at least i see no problem on the first sight. Tried to test the https://www.webpackbin.com/bins/-KvMK7GooEOLVwtqEzgq in IE (using browserstack) but hell shitty IE 11 not supporting object assign.

Do you have any running project i could open in IE to see?

[nikhil4326]

Webpackbin not worked in IE11. The same code works in other browser
navigator object will not work for IE11. So i think i need to add customized logic(function) to get language by parsing accept-language request header. Do u know any other best way to achieve the same in IE11?

[jamuhl]

not sure...i think it works...https://stackoverflow.com/questions/2678230/how-to-getting-browser-current-locale-preference-using-javascript

Just that value might not be what you expect...

We detect: https://github.com/i18next/i18next-browser-languageDetector/blob/master/src/browserLookups/navigator.js

navigator.languages -> navigator.userLanguage -> navigator.language

[jamuhl]

If you need something else just add a custom detector: https://github.com/i18next/i18next-browser-languageDetector#adding-own-detection-functionality

[nikhil4326]

I checked, navigator object in IE 11 no more helps you to get browser language. So I did something like below:
In server.js:
res.cookie('language', req.get('Accept-Language').split(',')[0])
In i18n.js

var options= {
  order: ['cookie', 'navigator', 'localStorage', 'querystring', 'htmlTag'],
  lookupCookie: 'language'
}

i18n
  .use(LanguageDetector)
  .init({
    detection: options,
    // we init with resources
    resources: .....
});

above solution works for all browsers.

[jamuhl]

that's what we do in https://github.com/i18next/i18next-express-middleware

[AlexanderReichl]

Hi guys,

I'm struggeling with the same issue in IE11. Unfortunately, it's a must have to support IE11 within the company I'm currently working for.

So here's the deal:
Chrome, Firefox and Edge work perfectly with i18next and all Plugins. But trying to change the language in IE11 ends up in reloading the page and still showing the German translations, instead of the English ones.

My setup is a follows:
i18next.use(i18nextXHRBackend) .use(i18nextBrowserLanguageDetector) .init(i18nextOptions, function(err, t) { jqueryI18next.init(i18next, $); $('body').localize(); });

i18nextOptions = { load : [ 'de', 'en' ], whitelist : [ 'de', 'en' ], fallbackLng : 'de', backend : { loadPath : '../locales/{{lng}}/{{ns}}.gutachter.json' }, detection : { order : [ 'querystring', 'navigator', 'htmlTag', 'cookie', 'localStorage' ], lookupQuerystring : 'lng', lookupCookie : 'i18next', lookupLocalStorage : 'i18nextLng', caches : [ 'localStorage', 'cookie' ], cookieMinutes : 0 }, debug : false };

The following are the libraries I'm using:

<script type="text/javascript" src="../js/i18n/jquery-i18next.min.js"></script> <script type="text/javascript" src="../js/i18n/i18nextXHRBackend.min.js"></script> <script type="text/javascript" src="../js/i18n/i18nextBrowserLanguageDetector.min.js"></script>

It's to be said, that I'm not that familiar with the whole i18next Framework, which truly is a wonderful implementation and looks like great work you've done on it. I was forced using i18next, because the application I'm dealing with is written in HTML, JQuery, Ajax and Java with a Apache Tomcat Server in background. That application works in a single page principle and I had to look out for a JS based i18n.

So please forgive me if I do not understand any of your suggestions right away as I didn't understand the solution of "nikhil4326".

BTW: There are no errors in the IE11 console.

Thank for your valueable time and support.
Alex

[AlexanderReichl]

Hi @jamuhl
thank you for the quick reply. I used to href for the language changer, as follows:

<a href="index.html?lng=de" title="German" id="lng_de" class="hidden-sm-down languageSelector">DE</a> <a href="index.html?lng=en" title="English" id="lng_en" class="hidden-sm-down languageSelector">EN</a>

As I said i18next works perfectly in any other browser.

If I change debug mode to true I get the following output:
-> i18next::backendConnector: loaded namespace translation for language de [object Object]
-> i18next: languageChanged de

The url param lng=en doesn't seem to take effect.

[AlexanderReichl]

Yes it works perfectly.

[AlexanderReichl]

Thank you so far.
You mean debuggin i18nextBrowserLanguageDetector.min.js?

[AlexanderReichl]

I have a guess and I wonder if I may change the language on the fly without using a query link and do a localize on my whole structure?
May I change the language with something like i18next.lng = 'en'?

[AlexanderReichl]

Damn, I encountered another little but annoying issue.
$("#lng_en").click(function() { i18next.changeLanguage('en'); $('body').localize(); });

So instead of changing language with a href I check if the <a> tag was clicked. If so I change the language to en and do the localize to the whole body.

After clicking once it changes the language setting correctly, but it does not load the translations. The translations are loaded if I click $("#lng_en") a second time.

Any suggetions where that comes from?

[AlexanderReichl]

It works.
Wonderful!
Thank you again :)