21

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

Basit
  • 8,426
  • 46
  • 116
  • 196

1 Answers1

35

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>
Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Mr.J4mes
  • 9,168
  • 9
  • 48
  • 90
  • @edze thanks. You said be careful about Ids like `myForm:myInput`. I want to ask, what if i use `prependId=false`. Then i have only `myInput` as an ID instead of `myForm:myInput`. Thanks – Basit Dec 30 '11 at 04:44
  • @Basit: refer to this [answer](http://stackoverflow.com/questions/3972653/jsf-why-prependid-false-in-a-form?answertab=active#tab-top) for a short discussion about `preprendID="false"`. You should not over-use it. – Mr.J4mes Dec 30 '11 at 09:25
  • Uhhh. I have made bad experience with this :) I write for such things an own Renderer where I can encode my jQuery Part with escaped Ids. – edze Dec 30 '11 at 15:30
  • 1
    it should be `$("#myForm\\:myInput")`. You missed the # symbol – Basit Jan 18 '12 at 04:56
  • A full answer [here](http://stackoverflow.com/questions/5878692/how-to-use-jsf-generated-html-element-id-in-css-selectors) – Rafael Ruiz Tabares Jan 06 '14 at 18:31