[ACCEPTED]-how to create a language file for text in javascript files?-multilingual

Accepted answer
Score: 18

Create an object literal:

var messages = {
    welcome: "Welcome",
    goodbye: "Goodbye",
    error: "Something bad happend. Sowwy!"
};

Which you can then 19 reference, like so:

if (error) alert(messages.error);


This works great if you 18 want to implement multiple languages. What 17 I usually do is include a server-side file 16 which renders out a "messages" object according 15 to whatever language is selected in the 14 configuration of the app or according to 13 the UI-culture (in the case of ASP.NET).

Here's 12 how you would use it, in-line:

<head>
    <!-- messages.aspx renders out the object literal -->
    <script type="text/javascript" src="messages.aspx"></script>

    <script type="text/javascript">

        /* when messages.aspx is included it provides you with an object literal
           as a global variable. The example below would alert "Something bad
           happend. Sowwy!" */

        if (error) alert(messages.error);

    </script>
</head>


The neat thing 11 about using an object literal, is that the 10 code is more verbose. Instead of using an 9 array, like this: alert(messages[0]) you do this: alert(messages.error) which is 8 a bit more explanatory.

On a side-note: all 7 your messages are defined in one object, instead 6 of being defined by a bunch of variables, thereby 5 avoiding polluting the global namespace.


In 4 JavaScript you can modify objects at run-time. So 3 if you wanted to add more messages to the 2 object, later on in your code, you'd just 1 do this:

messages.newMessageAddedLaterOnInTheCode = "This is a new message";
Score: 5

I see the others have told you how to store 14 it in a JS file (as you asked). But might 13 I suggest that you store it in an XML file, instead? It's 12 somewhat easier to manage (IMO).

Create an 11 XML file, with entries like this:

<text id="welcome_to_site">Welcome to our site!</text>
<text id="come_back_soon">Come back soon!</text>

Then you 10 can easily grab all of the text you need 9 in your regular JS/jQuery:

var text = new Object();
$.ajax({
    async: false,
    type: 'GET',
    url: 'text.xml',
    dataType: "xml",
    success: function(xml){
        $(xml).find('text').each(function(){
            text[$(this).attr('id')] = $(this).text();
        });
    }
});

And to invoke 8 some text, it's as simple as this:

alert(text['welcome_to_site']);

And you 7 can always easily change it in the XML file: add 6 text, remove text, edit text. It's very 5 simple. It also helps to separate your design 4 and opens doors for you to allow others 3 to edit text, who might otherwise not be 2 able to if they had to sort through a bunch 1 of JavaScript.

Score: 1

One way to do it is have a separate js include 4 in your page that actually points to a server-side 3 script. This script can then echo out the 2 strings you need like this:

var STRINGS = {'greeting': "Hello", 'error': "Something went wrong"};

And in your webpage 1 have this:

We do this for http://addons.mozilla.org here: http://addons.mozilla.org/en-US/firefox/pages/js_constants.js

More Related questions