Ask Questions and Find Answers

I am trying to access the resource translations in my JSF project.

But the translation doesn't work. The translation in the xhtml file with #{i18n['...']} works but in js the Liferay.Language.get('...') returns the resource key.

I created an example project and edited the view.xhtml and added the changeContent.js. The content of the two files can be found below.

Debugging by me:
The resourcekey is the same in both cases, so at least JSF knows where to look for it.
The browser has the unmodified js file and the js is executed.

As far as I understood there is a mechanism that should send down a modified js that looks like 
var translatedString = 'Translated String';

That mechanism doesn't seem to work. Should that mechanism work for JSF projects? What is the proposed way to transate inside JS files for JSF projects? I looked at the demos at https://github.com/liferay/liferay-faces-bridge-impl/tree/master/demo but they don't seem to use js.

src/main/webapp/WEB-INF/views/view.xhtml

<?xml version="1.0"?>

<f:view
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
>
	<h:head>
		<h:outputStylesheet library="css" name="main.css" />
		<h:outputScript library="js" name="changeContent.js"/>
	</h:head>
	<h:body>
		<h:panelGroup id="panelId" layout="block">
			<h:outputText styleClass="bold-hello-world" value="#{i18n['LanguageTest-hello-world']}" />
			<p onclick="window.changeContent(this)">Click me to change me</p>
		</h:panelGroup>
	</h:body>
</f:view>

src/main/webapp/WEB-INF/resources/js/changeContent.js

window.changeContent = function(paragraph){
	var translatedString = Liferay.Language.get('LanguageTest-hello-world');
	console.log(translatedString);
	paragraph.innerHTML = translatedString;
}