How to include JavaScript files by h:outputScript?

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.

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.