JSF bean property not evaluated in external JavaSc

2019-02-20 16:55发布

站内文章 / JavaScript
50 0 0

问题:

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?

回答1:

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


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



回答3:

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.



回答4:

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


标签： javascript jsf java-ee el
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~