Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The JS file is apparently referencing picture files via a relative path which do not represent a valid JSF resource URL. </p> <p>The <code>&lt;h:outputScript&gt;</code> generates a JSF resource URL which goes through the JSF resource handler which worries about among others automatic localization and versioning. It would generate an URL prefixed with <code>/javax.faces.resource</code> and also append the currently used <code>FacesServlet</code> URL mapping such as <code>*.xhtml</code> or <code>/faces/*</code>.</p> <p>Thus, if you mapped the faces servlet on <code>*.xhtml</code> and have a <code>/resources/jscolor</code> folder with the JS and image files and have referenced the JS file as follows,</p> <pre><code>&lt;h:outputScript name="jscolor/jscolor.js" /&gt; </code></pre> <p>then it would generate</p> <pre><code>&lt;script type="text/javascript" src="/context/javax.faces.resource/jscolor/jscolor.js.xhtml"&gt;&lt;/script&gt; </code></pre> <p>However, the image files are not physically available in <code>/javax.faces.resource/jscolor</code> folder, instead they are physically available in <code>/resources/jscolor</code> folder. The <code>/javax.faces.resource</code> would only be automatically resolved when you apply the faces servlet mapping on the resource name. Thus, this specific case would only work if you manually edit the <code>jscolor.js</code> file to change image file names from e.g. <code>arrow.gif</code> to <code>arrow.gif.xhtml</code>.</p> <p>If you don't utilize any automatic localization or versioning features of the JSF resource resolver, nor are using any special custom resource resolvers which requires real JSF resources rather than static HTML elements, such as <a href="http://showcase.omnifaces.org/resourcehandlers/CombinedResourceHandler" rel="nofollow noreferrer">this one</a>, then you can also just go ahead with a plain vanilla HTML <code>&lt;script&gt;</code> element instead of a <code>&lt;h:outputScript&gt;</code>.</p> <pre><code>&lt;script type="text/javascript" src="#{request.contextPath}/resources/jscolor/jscolor.js"&gt;&lt;/script&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload