Jquery.js file location
I created a sample jsf app and am trying to use jquery. What directory should the jquery.js file be in? web inf? CSA? I downloaded the .js file but it doesn't seem to work. I'm not sure where this should be.
I updated my code to point to googleapis but it still doesn't 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>
source to share
You can save it anywhere as long as you give the correct file path. But try to keep it away from the directory WEB-INF
, keep only a closed file under that directory (files that are not directly accessible to users).
If you have a directory web-content
, save the jquery file in the directory web-content\js
so you can access it via <path-to-your-app>/js/jquery.js
.
But if you can try to use the CDN file version listed in the download jQuery section . You can use Google or Microsoft CDNs.
source to share
You can store script files in the WebResources
/ folder WebContent
(any resource folder, but the path must be right)
using the h:outputScript
script to load the file :( Link )
<h:outputScript name="js/jquery-1.6.2.js" />
if you are using RichFaces:
<a4j:loadScript src="resource:///pathToFile/jquery-1.4.2.min.js" />
Adding Google CDN :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
Ref: jQuery in xhtml
Your script: Use the code as shown below.
<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 (add google CDN in the body)
Live Example2 (add google CDN in the header).
source to share
Given that you are using JSF2, you can use the JSF2 resource management system. That is, drop the CSS / JS / image /resources
assets in the public webcontent folder like this:
WebContent |-- resources | |-- css | | `-- style.css | |-- js | | `-- script.js | `-- img | `-- logo.png :
which are then accessible by the following components:
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />
In your specific case, you 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 like this:
<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: <h:outputScript target="body">
will be auto-polished to the end <body>
, which will be removed before $(document).ready()
.
See also:
source to share
it doesn't matter as long as you supply the correct path as we are currently mainly using the google hosted jQuery library. which relieves some of the pressure on the road.
you can try google hosted library
please note that you will need to set http or https before link.
source to share
You can put the jquery library in a directory WebContent
inside a folder resources
in your web app.
WebContent ->resources->js->jquery-latest-version.js
and you can include jquery in the JSF page by specifying
<h:outputScript name="js/jquery-latest-version.js" />
inside html <head>
or at the bottom of the page.
source to share
In your web application add the resources
following folder the js
following folder named by your JavaScript file as jquery.js
and inside this valid JavaScript file with the name matching the syntax of the version eg 1_6.js
.
So for your example, it would be:
<your_web_app>/resources/js/jquery_min.js/1_6.js
This is the correct JSF way. Now you can use jsf in your pages:
<h:outputScript library="js" name="jquery_min.js"/>
And all versions will be driven by the JSF Framework. If you add the following version, perhaps 1_7, so the file is named 1_7.js
in your folder jquery_min.js
, then JSF will automatically make a call from the code above that version of the file.
source to share