JSF bean property not evaluated in external JavaScript file

Question

If I want to evaluate a JSF bean property from within JavaScript, I see that it works if the JavaScript snippet is inside the xhtml file, but doesn't work when the JavaScript snippet is in a separate js file.

So, this works:

index.xhtml

...
<h:body>
    <script type="text/javascript" src="resources/Javascript/jquery/jquery-1.7.2.js" />
    <script type="text/javascript" >
        $(document).ready(function() {
            alert('#{myBean.myProperty}');
        });
    </script>        
</h:body>

But this doesn't evaluate the ManagedBean's property:

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" />
</h:body>

MyJS.js

$(document).ready(function() {
    alert('#{myBean.myProperty}');
});

In this second case, the alert box contains the not-evaluated string #{myBean.myProperty}

How can I make it work from the external js file?

I think you can't from external JS, the only way as a workaround you need to pass that value to JS function from JSF page by calling it like functionName(#{value}); and do what you want in JS file like a normal JS value — Al-Mothafar
– Al-Mothafar, Commented Jul 15, 2012 at 10:14
You could also convert your .js in a .jsp. There are methods in the JSF API that allow you to process EL expressions from java code. — SJuan76
– SJuan76, Commented Jul 15, 2012 at 10:22
Honestly I prefer the first suggestion because I would like to avoid using JSP — perissf
– perissf, Commented Jul 15, 2012 at 10:24

Steven · Accepted Answer · 2012-10-12 00:00:31Z

Another solution is to change your *.js file to *.xhtml and include it with "<ui:include ... />". To avoid the parser complaining about the use of &, < and > in your *.xhtml file, surround it with a CDATA tag. The disadvantage of this is if the *.js file is being used in other pages, the browser won't be able to cache it.

MyJS.xhtml (changed from MyJS.js)

<xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>
<ui:composition>

<script type="text/javascript">
//<![CDATA[
  ...your JavaScript code here...
//]]>
</script>

</ui:composition>
</h:body>
</html>

In your index.xhtml file, do the following:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  ...
<ui:include src="MyJS.xhtml" />

Daniel · Accepted Answer · 2012-07-15 10:55:21Z

2

I personally prefer the following approach

<h:inputText id="myHiddenData" value="#{myBean.myProperty}" style="display:none">


$(document).ready(function() {
    alert($("#myHiddenData").val()); // or alert($("#myFormID\\:myHiddenData").val());
});

I just don't like mixing js code with JSF...

edited Jul 15, 2012 at 10:55

answered Jul 15, 2012 at 10:46

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

2 Comments

user207421 Over a year ago

You are mixing JavaScript code with JSF. You're just doing it inline rather than via .js files. Which is the only way it can work. JSF can't see the .js files.

Daniel Over a year ago

@EJP I'm accessing from js a value that being passed to JSF , I don't think that it can be called "mixing JavaScript code with JSF"

Al-Mothafar · Accepted Answer · 2012-07-15 10:25:30Z

I just was want to check something before answer, like I said in my comment :

I think you can't from external JS, the only way as a workaround you need to pass that value to JS function from JSF page by calling it like functionName(#{value}); and do what you want in JS file like a normal JS value.

Like in your index.xhtml:

<script type="text/javascript" >
        $(document).ready(function() {
            functionName('#{myBean.myProperty}');
        });
</script>

or like :

<h:commandLink action="..." value="..." onclick="functionName('#{myBean.myProperty}')"/>

and in your js file:

function functionName(var1) {
// DO what you want to do with var1 or varN like normal JS value
}

Sure you can pass a multi-parameters not only single parameter.

perissf · Accepted Answer · 2012-07-15 11:01:35Z

0

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

answered Jul 15, 2012 at 11:01

perissf

16.3k14 gold badges85 silver badges121 bronze badges

1 Comment

Daniel Over a year ago

you really better start using <h:outputScript stackoverflow.com/a/11333632/617373 and mkyong.com/jsf2/resources-library-in-jsf-2-0

Collectives™ on Stack Overflow

JSF bean property not evaluated in external JavaScript file

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related