Access JSF resource from javascript

Question

I want to access a JSF resources ( under WebPages/resources/img) from a javascript function like:

function hideSpinner() {
    arguments[i].poster = './img/sppiner.png';
}

I have tried arguments[i].poster = "${resource['img/sppiner.png']}"; and arguments[i].poster = '${resource[\'img/sppiner.png\']}'; but it doesnt work..

What Can I do?

Try #{request.contextPath}/resources/img/sppiner.png. It will work if your javascript function is located into a facelet page. — Aritz
– Aritz, Commented May 8, 2015 at 18:51

Community · Accepted Answer · 2017-05-23 11:58:30Z

4

EL expressions are only evaluated in Facelets (XHTML) files and in CSS files loaded via <h:outputStylesheet>. They are not evaluated in JS files loaded via <h:outputScript>.

You basically need to render an inline script which sets a (global) JavaScript variable which the JS file should in turn refer to.

<h:outputScript>var spinnerImage = "${resource['img/sppiner.png']}";</h:outputScript>
<h:outputScript name="js/some.js" />

arguments[i].poster = spinnerImage;

Much cleaner, however, is to set the image as a CSS background image associated with a specific CSS style class and then just let JavaScript set that style class on the desired element. As said, you can use EL expressions in CSS files loaded via <h:outputStylesheet>. See also a.o. How to reference JSF image resource as CSS background image url.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 9, 2015 at 17:17

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ScottFree Over a year ago

great answer, if the file js/some.js has javascript file references then these return 404 error as they are not referenced in the h:outputScript way, do you have any idea how to resolve without updating all references in js/some.js?

Collectives™ on Stack Overflow

Access JSF resource from javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related