Mixing JSF EL in a JavaScript file

el, javascript, jsf, seam

Solution

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;
    });
});

Problem

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.

Original source