Menu
I am learning jQuery. I want to use jQuery inside my jsf 2.0 application. Like i have html file, in which i am using jQuery like this
<head> <title>The Devil's Dictionary</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/06.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/06.js"></script> </head> I simply downloaded the jquery-1.7.1.js file form jQuery official website, included it into my directory and then start using jQuery.
My 06.js file conatin code like this
$(document).ready(function() { $('#letter-a a').click(function(){ /** * The .load() method does all our heavy lifting for us! We specify the target location for * the HTML snippet by using a normal jQuery selector, and then pass the URL of the file to * be loaded as a parameter to the method. Now, when the first link is clicked, the file is * loaded and placed inside <div id="dictionary">. The browser will render the new HTML as * soon as it is inserted, */ $('#dictionary').load('a.html'); return false; }); //end of $('#letter-a a').click() /** * Occasionally, we don't want to retrieve all the JavaScript we will need when the page is * first loaded. We might not know what scripts will be necessary until some user interaction * occurs. We could introduce <script> tags on the fly when they are needed, but a more elegant * way to inject additional code is to have jQuery load the .js file directly. * * Pulling in a script is about as simple as loading an HTML fragment. In this case we use * the $.getScript() function, which, like its siblings, accepts a URL locating the script * file, as shown in the following code snippet: */ $('#letter-c a').click(function(){ $.getScript('js/c.js'); return false; }); //end of $('#letter-c a').click(function()) }); //end of $(document).ready(fn) Here is my html file code snippet
<html> <head> <title>The Devil's Dictionary</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/06.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/06.js"></script> </head> <body> <div id="container"> <div class="letters"> <div class="letter" id="letter-a"> <h3><a href="#">A</a></h3> </div> <div class="letter" id="letter-b"> <h3><a href="#">B</a></h3> </div> <div class="letter" id="letter-c"> <h3><a href="#">C</a></h3> </div> </div> <div id="dictionary"> </div> </div> </body> I want to ask if i create the same page on JSF2.0, then jQuery will work in the same way or i have to downlaod some plugin to use jQuery inside my JSF 2.0 application? or to modify something inside my web.xml ?
Thanks
834
jQuery is a JavaScript (client side) library. You can use jQuery with JSF since the rendered JSF is just HTML (and JavaScript depending on the JSF library).
The JavaScript resource file bundled with JavaServer Faces technology is named jsf. js and is available in the javax. faces library. This resource library supports Ajax functionality in JavaServer Faces applications.
It works the same way.
JSF appends the form's ID to all input fields inside the form. Hence, you need to be careful with your jQuery selectors. For example, suppose you have the following form:
<h:form id="myForm"> <h:inputText id="myInput" /> </h:form> Using jQuery, you have to refer to the input as: $("#myForm\\:myInput")
Some frameworks such as PrimeFaces, use components that may not work or may lost their skinning if you import your jQuery with:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script> Instead, you should use their built-in jQuery library by importing as:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> This jQuery library is, however, included in conflict mode which means you cannot use $(). Hence, you may need this additional setting:
<h:outputScript target="head"> $ = jQuery; // Then you can use it $(document).ready(function() { ... }); </h:outputScript> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
