CODEWITHSUNDEEP
javascriptjsfjscolor
Petr Dušek
Petr Dušek

Reputation: 627

Include javascript with resources via h:outputScript

I would like to include JScolor to my jsf application. It is possible via <script> tag, but I mean it is more system via <h:outputScript>.

However it is not working with resources. JSColor includes one js file and some picture files - it seems like the js file is included and the reousrces not.

Could anybody tell me why? And how to solve this?

Thank you.

Upvotes: 4

Views: 26149

Answers (4)

user3755197
user3755197

Reputation: 1

Suppose your js file's path (file named jquery.js) into resources/js folder like that:

resources/js/jquery.js

Then you have to write:

<h:outputScript name="./js/jquery.js"  target="body"/>

PS. Pay attention on attribute target (eg head, body)

Upvotes: 0

John Quiroga C
John Quiroga C

Reputation: 1

add in web.xml

<servlet-mapping>
  <servlet-name>Resource Servlet</servlet-name>
  <url-pattern>/resources/*</url-pattern>
</servlet-mapping>

Upvotes: 0

BalusC
BalusC

Reputation: 1108712

The JS file is apparently referencing picture files via a relative path which do not represent a valid JSF resource URL.

The <h:outputScript> 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 /javax.faces.resource and also append the currently used FacesServlet URL mapping such as *.xhtml or /faces/*.

Thus, if you mapped the faces servlet on *.xhtml and have a /resources/jscolor folder with the JS and image files and have referenced the JS file as follows,

<h:outputScript name="jscolor/jscolor.js" />

then it would generate

<script type="text/javascript" src="/context/javax.faces.resource/jscolor/jscolor.js.xhtml"></script>

However, the image files are not physically available in /javax.faces.resource/jscolor folder, instead they are physically available in /resources/jscolor folder. The /javax.faces.resource 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 jscolor.js file to change image file names from e.g. arrow.gif to arrow.gif.xhtml.

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 this one, then you can also just go ahead with a plain vanilla HTML <script> element instead of a <h:outputScript>.

<script type="text/javascript" src="#{request.contextPath}/resources/jscolor/jscolor.js"></script>

Upvotes: 15

azendh
azendh

Reputation: 931

I may misunderstand your question, but this snippet will help:

<script
    type="text/javascript"
    src="#{facesContext.externalContext.requestContextPath}/path/on/WebContent/foo.js"></script>

I regularly use this kind of java resource include, instead of the <h:outputScript>

Upvotes: 3

Related Questions