JSF bean property not evaluated in external JavaScript file

后端未结

关注

 4  585

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 JavaScri

相关标签:

4条回答

别那么骄傲

2021-01-16 10:31
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" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2021-01-16 10:37
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

粉色の甜心

2021-01-16 10:44

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

0 讨论(0)

失恋的感觉

2021-01-16 10:47

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

0 讨论(0)