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.

Answer 1

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: