Resolving spring:messages in javascript for i18n internationalization

Question

I'm attempting to internationalize some of our code. I have a page in JSPX which is using the <spring:message> tag to resolve strings from a message.properties file. This works fine for the HTML and CSS that is in the JSPX page, however there a javascript file is sourced, and substituting the <spring:message> tag for the string in there just means that it gets printed out verbatim.

My JSPX sources the javascript like so:

<spring:theme code="jsFile" var="js" />
<script type="text/javascript" src="${js}" />

The JS where I'm looking the replace the string is below:

buildList('settings', [{
    name: '<spring:message code="proj.settings.toggle" javaScriptEscape="true" />',
    id:"setting1",
    description: '<spring:message code="proj.settings.toggle.description" javaScriptEscape="true" />',
    installed: true
}]);

And finally the message.properties is something like:

proj.settings.toggle=Click here to toggle
proj.settings.toggle.description=This toggles between on and off

So what I'm wondering is, should this work? It seems to me like it should, from what I've gathered on various forums, but I can't figure out where I'm going wrong. Is there a better way to go about this?

I should also note that these files are outside the WEB-INF folder, but by placing the ReloadableResourceBundleMessageSource in the root applicationContext.xml the spring tags are picked up.

Thanks for any help!

Answer 1

It seems to me that what you want to do is to treat JS file like JSP file and resolve its contents via spring:message tag.
I would not do that.

Typically JS i18n is done in one of two ways:

• By writing out Array of translated strings from JSP page
• By creating translation filter and provide pre-translated JS file to requesting client

Both works best if you create one central location for your client-side translatable strings.
In your context, I would recommend the first method (much easier). That is unless your project is pretty large and you have a lot of translatable strings on the client side. So the modification would look like:

<script type="text/javascript">
  var strings = new Array();
  strings['settings.toogle'] = "<spring:message code='proj.settings.toggle' javaScriptEscape='true' />";
  strings['settings.toogle.description'] = "<spring:message code='proj.settings.toggle.description' javaScriptEscape='true' />";
</script>
<spring:theme code="jsFile" var="js" />
<script type="text/javascript" src="${js}" />

And in your JS file:

buildList('settings', [{
    name: strings['settings.toggle'],
    id:"setting1",
    description: strings['settings.toggle.description'],
    installed: true
}]);

Mind you that I used double quotes for writing out translated strings. That is because of some words in French or Italian that could contain apostrophe.

Edit: Additional input

We provide translations to JS files for the reason. Usually, the reason is we want to create some part of UI dynamically. There are also cases where we need to localize some 3rd party component, my answer above deals with them pretty well.
For cases where we want to create UI parts dynamically, it really make sense to use templates rather than concatenate HTML tags in JavaScript. I decided to write this, because it makes for much cleaner (and possibly reusable) solution.
So instead of passing translations to JavaScript one may create a template and put it on the page (my example will use Handlebars.js, but I believe it is possible to use any other engine):

<script id="article" type="text/x-handlebars-template">
  <div class="head">
    <p>
      <span>
        <spring:message code="article.subject.header" text="Subject: " />
      </span>{{subject}}</p>
  </div>
  <div class="body">
    {{{body}}}
  </div>
</script>

On the client side (that is in JavaScript) all you have to do is to access the template (example below obviously uses jQuery) and compile:

var template = Handlebars.compile($("#article").html());
var html = template({subject: "It is really clean",
  body: "<p>Don't you agree?</p><p>It looks much better than usual spaghetti with JavaScript variables.</p>"
});
$("#someDOMReference").html(html);

Few things to note here:

• <spring:message /> tags escape both HTML and JS by default, we do not need to specify the javaScriptEscape attribute
• It make sense to provide text attribute for <spring:message /> tag as it could be used as a fall-back (if there is no translation for given language) as well as a comment (what this element stands for). One can even create a tool that would scan files for <spring:message /> tags and automatically generate properties files
• To prevent Handlebars from escaping HTML contents, I used triple {{{curly braces}}}

That's basically it. I recommend using templates if that's possible.