How should I go about localising an existing JavaScript web application?

Question

I have a really tricky task to do: there is an existing web project (2 HTML files, a few plugins, and one main JavaScript file with about 2000 lines of code) which I now have to localize. No question, this should have been considered earlier, but they just missed it. How would you go to find a solution for that?

There are a few elements with just a few text elements which are exist when the page is initially loaded. But there are also a lot of DOM elements and error alerts which are dynamically appended and removed (using jQuery) on the fly.

I think I’m going to have text resources (which kind of files?) with unique names/numbers on the server (which is .NET/C#). While loading the webpage, I could detect the user-agent’s language and then send that to the server so that "it" prepares the right resources. And then I should have a method like getText(uniqueName) which requests the right text via AJAX from the server. But this would produce a whole lot of AJAX requests.

I’ve only got a few thoughts, but nothing "real" at all yet.

Could you please help around with ideas? What will the server have to handle, what will the script handle, and how?

Thx.

There might be some decent ideas in the answer to this question: http://stackoverflow.com/questions/104022/localize-strings-in-javascript — Paul D. Waite, Nov 09 '11 at 08:52
what is your server side technology? php? asp.net? asp.net mvc? — Patricia, Nov 09 '11 at 16:03

ThinkingStiff · Accepted Answer · 2011-12-07T18:18:36.767

I use separate .js files like strings-en.js. I load the .js file dynamically based on settings in my user DB.

Demo: http://jsfiddle.net/ThinkingStiff/uUTkN/

strings-en.js:

var STRINGS = {

    "userLabel": "username",
    "userPlaceholder": "enter username..."

    //...

};

HTML:

<script src="strings-en.js"></script>

<label id="user-label" for="user"></label>
<input id="user" />

CSS:

#user-label::after
{
content: ":";  
}

Script:

document.getElementById( 'user-label' ).textContent = STRINGS.userLabel;
document.getElementById( 'user' ).setAttribute( 'placeholder', STRINGS.userPlaceholder );

Output:

enter image description here

score 1 · Answer 2 · answered Nov 09 '11 at 08:58

1

If you want you translation within your resx files you might want to look at Localize text in JavaScript files in ASP.NET

If you want a pure client side localization you could use jquery.localize

answered Nov 09 '11 at 08:58

Manuel van Rijn

10,170
1
29
52

How should I go about localising an existing JavaScript web application?

2 Answers2

Linked