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

1 Answer 1

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>
5
  • @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, 2011 at 4:44
  • @Basit: refer to this answer for a short discussion about preprendID="false". You should not over-use it.
    – Mr.J4mes
    Dec 30, 2011 at 9: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, 2011 at 15:30
  • 1
    it should be $("#myForm\\:myInput"). You missed the # symbol
    – Basit
    Jan 18, 2012 at 4:56
  • A full answer here Jan 6, 2014 at 18:31

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.