How to select the file depending on the browser language?

Question

How to select the file depending on the browser language in sencha touch 2? I have 3 files app_de.js, app_en-US.js and app_es.js under my project. I am finding the browser language and loading the file like this:

 <script type="text/javascript" id="extlocale">

    var browserLang = window.navigator.language; // get the browsers language
    alert(browserLang);
    var locale = 'en'; // default locale

    if(browserLang == 'de' || browserLang == 'de-de')       //called when the language is german
    {
        locale = 'de';
    }
    else if(browserLang == 'en-US' || browserLang == 'en-us' || browserLang == 'en')
    {
        locale = 'en-US';                           //called when the language is english
    }
    else if(browserLang == 'es' || browserLang == 'es-es' )
    {
        locale = 'es';                              //called when the language is spanish
    }
    else
    {
        console.log("Invalid language");
        locale = 'en-US';
    }
    if(locale) {

       Ext.fly('extlocale').set({src:'app_'+locale+'.js'});

    }

</script>

The files will work individually if i include it this way:

  <script type="text/javascript" src="app_en-US.js"></script>

Please let me know how to load the file depending on the browser's language?

Can you do anything on the server, or are you stuck with JavaScript? — Ignacio Vazquez-Abrams, Apr 13 '12 at 04:05

score 1 · Answer 1 · edited Aug 10 '12 at 12:05

To load file depending on browser language in Sencha Touch 2, the best thing to do is to load a common file, and depending on browser language, load the contents.

<script type="text/javascript" src="locale.js"></script><!--locale.js was the file invoked-->

And in the locale.js, depending on the language of browser, load the contents.

Example with a login form:

var browserLang = window.navigator.language; // get the browsers language
alert(browserLang);

var Messages;

switch (browserLang) {

    case 'en-US':
    Messages = {
        username : 'EN-glish Username',
        password : 'EN-glish Password',
        login    : 'EN-glish Login' 
    };
    break;

    case 'hi':
    Messages = {
        username : 'HI-ndi Username',
        password : 'HI-ndi Password',
        login    : 'HI-ndi Login'   
    };
    break;

    ........

}

From this, if the browser language is en-US it displays the English content, and if language is Hindi it displays the Hindi content.

Here I used a simple switch case, but depending on your usability, modify it to meet your objective.

score 0 · Answer 2 · answered Apr 13 '12 at 04:59

You need a more cross-browser way of detecting browser language. There is no standard for it, but the following is a good try:

 function browserLanguage() {
   if (!navigator) { return null; }
   return navigator.language || navigator.browserLanguage ||
          navigator.systemLanguage || navigator.userLanguage || null; 
 }

You also need a better way of mapping language codes to those you support. For example, shouldn’t de-AT be recognized and treated as de? What about en-GB? The simplest approach is to parse the language code so that you do split('-') and take the first part only. If your file needs to be en-US.js you would need to map en to en-US.

I don’t know Ext.fly(), but just adding a script element is rather easy, even without a library. Just find a place for it in the document, do document.createElement('script'), assign src property to it, and put it into the document tree.

Note that the browser language is the browser’s own idea of its own UI language and need not match the user’s preferences at all. It isn’t usually even controllable by the user, except that he may be able to decide which browser (and version thereof) he uses.

How to select the file depending on the browser language?

2 Answers2

Linked