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?

Answer 1

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