Multiple language support by jquery.localize.js

(This is a test post to check the number of access if I describe post in English)
I translated
jquery.localize.jsで多言語対応 - まめージェント
into English since it is most popular column in my blog.

I supported multiple language since I always thought that i need to support. At this time, I used jquery.localize.js because it is easiest at a glance.

Below is instructions:

1: Download jquery.localize.js
You can download it from here:
https://github.com/coderifous/jquery-localize

Unzip and copy jquery.localize.js to your workspace.

2: Load jquery.js and jquery.localize.js
I think it is good to describe below two lines into your

tag in your HTML file.

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.localize.js" charset="utf-8"></script>

3: Add below Javascript

<script>
var opts = {
	language : lang,
	skipLanguage : "en"
};
$("[data-localize]").localize("test", opts);
</script>

In my case, since I write English in HTML, I need not to translate English. Then, I add "skipLanguage : "en"".
If you write non-English (e.g Japanese) and you have to translate it into English, please use below code:

var opts = {
	language : lang,
	skipLanguage : "jp"
};

("jp" part should be changed depends on your language)

5:Add JSON
Put translation data into JSON.
In this case, it is named as "test-ja.json" This "test" part should be same with "test" that I described above $("[data-localize]").localize("test", opts); in No.3 charpter.
I you create English translation, its name is "test-en.json"

test-ja.json

"title": "てすと"
"footer": {
	"home": "ホーム",
	"about": "このサービスについて"
}

And also we can have hierarchy in the JSON file as above sameple code.

6: Call it from HTML
For instance, if you want to call it from h3 tag, please add "data-localize" to h3 tag.

<h3 data-localize="title">Test message here</h3>

The "data-localize" is a string that you wrote in $("[data-localize]").localize("test", opts); in chapter 3.

Below is an example for usage of hierarchy-JSON format:

<h3 data-localize="footer.home">Home</h3>

7: Now it should work!
Now you can use translation function. If your browser setting is Japanse, Japanese translation should be displayed. Just for your infomration, in Mac case, we have to change language setting mac itself (meaning we can't check it even if you change browser language setting)

8: (FYI) Format check for JSON
(Of course)if you have miss-spelling in JSON file, this function can't translate to other languages. To validate spelling, I recommend to use below web site:

JSONLint
http://jsonlint.com/

This is a validation site for JSON format. (To be honest, it is bit difficult to understand what each error is...)

9: Note for execution / deploy
In my case, I develop my web service with Mac + GAE + Eclipse. And i sometimes faced troubles that translation doesn't work. This is caused by Browser cache and please disable cache. Then, please disable Browser cache for clear browser cache.