Mixing JSF EL in a JavaScript file

Five ways:

1. Declare it as global variable in the parent JSF page.

   <script type="text/javascript" src="https://stackoverflow.com/questions/2547814/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="https://stackoverflow.com/questions/2547814/script.js"></script>
   <script type="text/javascript">var messages = #{bean.messagesAsJson};</script>
   

2. Put the whole <script> in a XHTML file and use ui:include to include it.

   <script type="text/javascript" src="https://stackoverflow.com/questions/2547814/script.js"></script>
   <ui:include src="script-variables.xhtml" />
   

3. 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>
   

4. 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" %>
   

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