How to include JavaScript files by h:outputScript? [duplicate]

Question

I want to use jQuery Validate plugin with JSF for client side form validation. I am finding basic difficulty in importing the resources.

In my JSF page I have

<h:outputScript library="js" name="jquery-1.6.2.js"></h:outputScript>
<h:outputScript library="js" name="jquery.validate.js"></h:outputScript>
<h:outputScript library="js" name="jquery.maskedinput.js"></h:outputScript>
<h:outputScript library="js" name="myapp.validate.js"></h:outputScript>

When I click on the script tab in the Firefox, I can't see any script files in the dropdown. There is a message shown:

If tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

Futher my jquery effect like mouse hover, hide, show etc do not work. I tried with usual script tags

<script type="text/javascript" src="../js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="../js/myapp.validate.js"></script>

Which was of no use. Still it was not able to locate my JS files. All my JS files are placed under

   Web pages
       |_ js
           |_jquery-1.6.2.js,my.validate.js,jquery.validate.js,jquery.maskedinput.js

I tried one of the solutions posted at Using jQuery with JSF 2.0's resource but had no success.

Kindly suggest me a solution for this. I don't want to use JSF builtin validation with ajax, because we moved the code from JSP to JSF and the validation is already written. I want to reuse the existing jQuery Validation which I previously wrote.

Valiant

Answer 1

The <h:outputScript> (and <h:outputStylesheet>) loads resources from /resources folder. You need to put the scripts in that folder.

WebContent
|-- resources
|    `-- js
|        |-- jquery-1.6.2.js
|        |-- myapp.validate.js
|        |-- jquery.validate.js
|        `-- jquery.maskedinput.js
|-- WEB-INF
:

Then the following script declarations should work:

<h:outputScript name="js/jquery-1.6.2.js" />
<h:outputScript name="js/jquery.validate.js" />
<h:outputScript name="js/jquery.maskedinput.js" />
<h:outputScript name="js/myapp.validate.js" />

(note that I omitted the library attribute, because the name "js" does not indicate a real library)

That your <script> approach failed is probably caused by using an incorrect relative path. You need to realize that resources are resolved relative to the current request URL and not to their path in the server side disk file system.

Husbandman

@BalusC-So it automatically looks under resources folder?? If so does that mean I have to place my web content---css,images etc under resources only??? Is this a std folder structure set in netbeans?? – Valiant

That's what the documentation says, yes. No, this is completely unrelated to Netbeans. It's just a tool. – Husbandman

@Husbandman You say that you omitted the library attribute because it does not indicate a real library. What do you mean exactly? What kind of names can be used? Doesn't the library correspond to the name of the folder under resources? – Ryals

@user: The "resource library" should denote the common theme/skin/module where all of those resources belong to, which can even be embedded in a JAR file in /WEB-INF/lib. This also allows you for proper library version management. As to the name, just choose your own. JSF uses "javax.faces", PrimeFaces uses "primefaces", OmniFaces uses "omnifaces", etc. See also among others: stackoverflow.com/questions/9929417, stackoverflow.com/questions/10362942 and stackoverflow.com/questions/8320486 – Husbandman

@Husbandman Thanks but I don't get it. Under resources there should only be one folder (common, javax.faces, primefaces, omnifaces) and under that css, js etc? I currently have css and js under resources directly and I can use library="css" with outputStylesheet but library="js" does not seem to work with outputScript. – Ryals

For those who have a Maven structure, the .js files should be in webapp/resources/js. Referring them will be identical. Even if you have them in webapp or WebContent, they will appear in the DOM having src="/prj/javax.faces.resource/js/file.js.xhtml". – Emitter