CODEWITHSUNDEEP
jquerylocalization
opHASnoNAME
opHASnoNAME

Reputation: 20726

Localization with JQuery?

I have no idea how to handle localization with JQuery. I want to set an innerHTML with German text, but if the browser is configured to use English, then I want to set English text.

In PHP I use gettext for such stuff, but how to do it in JavaScript/jQuery?

Upvotes: 13

Views: 35523

Answers (6)

getSurreal
getSurreal

Reputation: 377

Since you already use gettext with your php application, you should look into using this javascript implementation of gettext

It doesn't use the compiled .mo files but it will use your .po files you already have.

This method has the advantage of managing all your translations in one place.

Upvotes: 1

34m0
34m0

Reputation: 5945

Another option you could look into is the Microsoft proposed jquery-global plugin. It is still in beta mind.

Upvotes: 0

Martin Owen
Martin Owen

Reputation: 5271

I've not used it yet, but I'm thinking about using jquery-localize for a project. If you don't mind basing the translation on 'rel' attributes defined on your elements then it looks like a good option.

Example from the README:

HTML

<p rel="localize[title]">Tracker Pro XT Deluxe</p>
<p rel="localize[search.placeholder]">Search...</p>
<p rel="localize[search.button]">Go!</p>
<p rel="localize[footer.disclaimer]">Use at your own risk.</p>
<p rel="localize[menu.dashboard]">Dashboard</p>
<p rel="localize[menu.list]">Bug List</p>
<p rel="localize[menu.logout]">Logout</p>

application-es.json

{
  title: "Tracker Pro XT Deluxo",
  search: {
     placeholder: "Searcho...",
     button: "Vamos!"
  },
  footer: {
    disclaimer: "Bewaro."
  },
  menu: {
    dashboard: "Dashboardo",
    list: "Bug Listo",
    logout: "Exito"
  }
}

Localize it!

$("rel*=localize").localize("application", { language: "es" })

Upvotes: 8

ctrlShiftBryan
ctrlShiftBryan

Reputation: 27740

Give this a try. The TranslateThis Button is a lightweight Javascript translation widget. It translates any page quickly using AJAX and the Google Language API.

Here...

Upvotes: 0

Adam
Adam

Reputation:

You actually don't need JQuery at all.

The navigator object in javascript (http://www.comptechdoc.org/independent/web/cgi/javamanual/javanavigator.html) contains a userLanguage(IE) and language(Netscape/Firefox) property that is set by the browser's current locale.

To solve your example you could use something like;

   
  var textToSet = null;
  var userLang = null;

  /*
  -if userLanguage exists they're in IE, else firefox
  -get the first two letters in lowercase to guarantee 
   an easily evaluated base language
  */
  if(navigator.userLanguage) baseLang = substring(navigator.userLanguage,0,2).toLowerCase();
  else baseLang = substring(navigator.language,0,2).toLowerCase();

  //check languages
  switch(baseLang)
  {
    case "de":
      //German
      textToSet = "german text";
      break;
    default:
      textToSet = "english text";
  }
  document.getElementById('elementToSetTextInto').innerHTML = textToSet;

Keep in mind, you might want different text based off of base language and locale.. in that case look for "en-us", "de-de". Sites for culture codes are easily googled (1 link on first post only ;))

Hope that works out for ya.

Upvotes: 3

RaYell
RaYell

Reputation: 70404

There is no easy solution for that. What I would probably do is create several scripts with language texts for every language and include proper one in PHP. So if someone is using english version of your site you would include only english file, if someone is using german version you would include german language file etc.

Example:

// your script logic
myscript.js

// language texts
myscript.en.js
myscript.de.js
myscript.it.js
...

You can define all language files like that:

LANG = {
    txt1: 'English text1',
    txt2: 'English text2'
    ...
};

Make sure you are including only one of those in your HTML and make sure to include language file first i.e.

<script type="text/javascript" src="myscript.de.js"></script>
<script type="text/javascript" src="myscript.js"></script>

Then you can use those localized texts in your main script for example:

$(document).ready(function () {
    alert(LANG.txt1);
});

What's best about it is that your logic (myscript.js in this example) doesn't have to worry about localization and you won't have to change it if you want to add a new language file.

Upvotes: 16

Related Questions