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?
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?
Share Improve this question asked Jul 15, 2012 at 10:11 perissfperissf 16.3k14 gold badges84 silver badges120 bronze badges 4-
1
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 Commented Jul 15, 2012 at 10:14 - Thanks, this makes a lot of sense! – perissf Commented Jul 15, 2012 at 10:18
- 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 Commented Jul 15, 2012 at 10:22
- Honestly I prefer the first suggestion because I would like to avoid using JSP – perissf Commented Jul 15, 2012 at 10:24
4 Answers
Reset to default 5Another solution is to change your *.js file to *.xhtml and include it with "<ui:include ... />". To avoid the parser plaining 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/1999/xhtml"
xmlns:ui="http://java.sun./jsf/facelets">
<h:body>
<ui:position>
<script type="text/javascript">
//<![CDATA[
...your JavaScript code here...
//]]>
</script>
</ui:position>
</h:body>
</html>
In your index.xhtml file, do the following:
<html xmlns="http://www.w3/1999/xhtml"
xmlns:ui="http://java.sun./jsf/facelets">
...
<ui:include src="MyJS.xhtml" />
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...
I just was want to check something before answer, like I said in my ment :
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:mandLink 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.
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);
});