Is there a way to have Expression Language (EL) expressions included JavaScript files be evaluated by JSF?
I was hoping that Seam might have a way around this, but no luck so far. All I want is to be able to use localized messages in my JavaScript functions which are shared across pages.
Five ways:
Declare it as global variable in the parent JSF page.
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var messages = [];
<ui:repeat value="#{bean.messages}" var="message">
messages['#{message.key}'] = '#{message.value}';
</ui:repeat>
</script>
Or, if it's in JSON format already.
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">var messages = #{bean.messagesAsJson};</script>
Put the whole <script>
in a XHTML file and use ui:include
to include it.
<script type="text/javascript" src="script.js"></script>
<ui:include src="script-variables.xhtml" />
Pass *.js
through the JspServlet
(only if it's enough to evaluate only the ${}
expressions). E.g. in web.xml
(the <servlet-name>
of JspServlet
can be found in web.xml
of the servletcontainer in question, it's usually jsp
).
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
Make use of "good old" JSP with a modified content type. Rename script.js
to script.jsp
and add the following line to top of JSP (only if it's enough to evaluate only the ${}
expressions):
<%@page contentType="text/javascript" %>
Let JS obtain the data ajaxically during load. Here's a jQuery targeted example.
$.getJSON('json/messages', function(messages) {
$.each(messages, function(key, value) {
$.messages[key] = value;
});
});