Mixing Jsf El in a JavaScript File

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="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>
   

2. 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" />
   

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

How to use EL in external javascript file

You can just declare some input parameters for the external java script 's function .When calling the external java script 's function in JSF , you can use the EL expression to access the values from the beans and pass them to the external java script 's function.

Something like this:

function someExternalJsFunction(var1,var2,...,varX)
{

}

Then in the JSF:

<h:commandLink action="....."  
onclick="someExternalJsFunction(#{request.contextPath},#{myBackingBean.myProperty},....)"/> 

JSF bean property not evaluated in external JavaScript file

Thanks to the suggestion by @Al-Mothafar, I have finally solved my issue in the following way:

index.xhtml

...
<h:body>
    <script type="text/javascript" src="resources/Javascript/jquery/jquery-1.7.2.js" />
    <script type="text/javascript" src="resources/Javascript/MyJS.js" />
    <script type="text/javascript" >
        var myBeanProperty = '#{myBean.myProperty}';
    </script>        
</h:body>

MyJS.js

$(document).ready(function() {
    alert(myBeanProperty);
});

How to do the console.log for EL expression in JS file

To start, you need to understand that JSP (and JSTL and EL) basically produces HTML (and CSS and JS) code. It doesn't run in sync with JavaScript code. If you rightclick the JSP page in webbrowser and do View Source then you'll see it.

I think that your concrete problem is caused because the ${tagTwo} returns a plain vanilla string which is in turn by JS been interpreted as a variable name, because it isn't been enclosed in quotes.

You need to let JSP print a fullworthy JS string instead of a variable name.

console.log('${tagTwo}');

How to mix JavaScript and jQuery with JSF?

I'm using NetBeans IDE 6.9.1 to develop web applications in J.S.F in which Javascript can not be used with the same syntax as it is used with other technologies.

First of all, it's JSF, not J.S.F.

---

For example, string concatenation can not be made using the + operator.

This is nonsense. Perhaps you're confusing JavaScript with EL.

---

It can be made using the operator & instead. Similarly, most of the logical operators need to be modified and so on...

That is indeed required if you write JavaScript code plain vanilla straight inside a XML based template, such as Facelets which uses XHTML. The characters <, >, &, ", etc are special characters in XML and should be escaped whenever you want to represent them as-is in XML. The normal practice is to just put that plain JS code inside its own .js file which you include by <script> or <h:outputScript>. Otherwise you've to put it in ugly <![CDATA[ blocks. Please note that this problem is not specifically related to JSF, but to combining JavaScript with XML in general.

See also:

• Error parsing XHTML: The content of elements must consist of well-formed character data or markup
• Mozilla Developer Guide - Writing JavaScript for XHTML

Reading a jstl variable in javascript code.

Just write the Expression Language directly in your JavaScript code:

$("#textBoxInp").keyup(function() {
    var userId = '${userId}';
});

Note that this won't work if the JavaScript code is placed in a external file and is invoked in the JSP. In this case, you may refer to one of the four ways that BalusC explain here: Mixing JSF EL in a Javascript file (he explains five, but one of them is JSF specific).

---

Related Topics