[ACCEPTED]-how to create a language file for text in javascript files?-multilingual
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";
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.
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
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.