location of jquery.js file

Question

I have created a sample jsf application, and am trying to use jquery. In what directory should the jquery.js file be located? web-inf? src? I downloaded the .js file, but it does not seem to be working. I'm not sure where it should be.

I have updated my code to point to the googleapis, but it still does not work:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

score 2 · Answer 1 · answered Jan 24 '13 at 04:01

You can keep it anywhere as long as you give correct path to the file. But try to keep it away from the WEB-INF directory, keep only private file under that directory (files which are not directly accessible to users).

If you have a web-content directory, keep the jquery file under web-content\js directory, so that you can access it via <path-to-your-app>/js/jquery.js.

But if you can try to use a CDN version of the file as given in the download section of jQuery. You can use either Google or Microsoft CDNs.

score 1 · Accepted Answer · answered Jan 24 '13 at 04:09

1

It doesnt matter, the most important is you have to give the correct path.

For example:

<script language="javascript" src='script/jquery-1.6.min.js'></script>

And your html file which includes jquery must be put alongside with the script folder.

answered Jan 24 '13 at 04:09

save_ole

300
1
3
10

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Given that you're using JSF2, you can utilize the JSF2 resource management system. That is, drop the CSS/JS/image resources in /resources folder of public webcontent like so:

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- img
 |         `-- logo.png
 :

Which are then available by the following components:

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

In your particular case, you thus need to save it as /resources/js/jquery-1.9.0.min.js:

WebContent
 |-- resources
 |    `-- js
 |         `-- jquery-1.9.0.min.js
 :

And reference it as follows:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript name="js/jquery-1.9.0.min.js" />
</h:head>
<h:body>
    <h:outputScript target="body">
        $("#p1").mouseenter(function(){
            alert("You entered p1!");
        });
    </h:outputScript>
    <p id="p1">Enter this paragraph.</p>
</h:body>

Note: the <h:outputScript target="body"> will be autorelocated to end of <body> which will be hit sooner than $(document).ready().

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
</h:head>
<h:body>
   <script type="text/javascript">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

Or

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#p1").mouseenter(function(){
                    alert("You entered p1!");
                });
            });
        </script>

Demo:
Live Example1(adding google CDN in body)
Live Example2 (adding google CDN in header).

Swarne27 · Answer 6 · 2013-01-24T11:52:27.477

0

You can put the jquery library in WebContent directory inside the resources folder in your web application.

WebContent
   ->resources->js->jquery-latest-version.js

and you can include the jquery in JSF page by specifying,

<h:outputScript name="js/jquery-latest-version.js" />

within html <head> or at the bottom of the page as well.

edited Jan 24 '13 at 11:52

answered Jan 24 '13 at 05:58

Swarne27

5,521
7
26
41

This is improper usage of resource library: http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used Just use `` – BalusC Jan 24 '13 at 11:43

score 0 · Answer 7 · answered Jan 24 '13 at 10:13

0

In your web-app add folder resources next folder js next folder named by your JavaScript file as jquery.js and inside this valid JavaScript file with name matching the syntax of version, for example 1_6.js.

So for your example it will be:

<your_web_app>/resources/js/jquery_min.js/1_6.js

This is a correct JSF way. Now you can use in your jsf pages:

<h:outputScript library="js" name="jquery_min.js"/>

And all versions will be managed by JSF Framework. If you add next version, maybe 1_7 so file named 1_7.js to your jquery_min.js folder then JSF will automaticall make call from above code to that version of file.

answered Jan 24 '13 at 10:13

Michał Kupisiński

3,765
1
19
23

This is improper usage of resource library: http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used Just use `` – BalusC Jan 24 '13 at 11:43
Please, in few words say me why? I read your question and self ansewer ;) in this link and still won't catch what you have in mind? – Michał Kupisiński Jan 24 '13 at 12:02
"js" does not represent a proper library name. – BalusC Jan 24 '13 at 12:20
Why? See JSF 2.2 Specification pages 75-81 (from 7 December 2012). Why for specification authors `images` is good name for library and is used as example and You said that `js` or `javascript` is not good? Isn't this case of web-app developer to decided how to named library? – Michał Kupisiński Jan 24 '13 at 12:27
1

Surely it'll work. That's not a technical problem. The functional problem is, if all component libraries use an overly generic term like "js" for their collection of JS files, how would you in the resource handler distinguish the component library vendor if necessary? – BalusC Jan 24 '13 at 12:30
Also in your answer to this question You suggest to use `name` attribute instead of `library` + `name` as `js` + `file_name.js`? Is it realy intuitive for you to named file as `js/file_name.js` instead of `file_name.js`. Is a name to doc file on Win Desktop a `Desktop/file.doc` or just `file.doc`? `library` attr, for me, was introducted exactly to difference files by their types and destiny. So .css files are destinied to be in css library, .js file to be in javascript library and so on? Isn't it true? – Michał Kupisiński Jan 24 '13 at 12:32
No, the `library` attribute is not to distinguish the file type. It's to distinguish the library. Otherwise that attribute was named `type` or so. – BalusC Jan 24 '13 at 12:33
But in spec authors distinguish images in `images` library, why? – Michał Kupisiński Jan 24 '13 at 12:34
That was just a bad example. – BalusC Jan 24 '13 at 12:36
Think in that way: if I named my library other way than I did it till now, so `javascript` and `css` and so on, there can comes some misunderstanding. In case when I have to files named the same but with other types (.css and .js) and have them in library `layout` how easy is to use in `name` attr wrong file by just missleading type of file? – Michał Kupisiński Jan 24 '13 at 12:38

location of jquery.js file

7 Answers7

See also:

Linked