How to use jQuery with JSF 2.0

Question

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

Answer 1

It works the same way.

ID Attributes

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")

Frameworks

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>