Home/ Questions/Q 6985047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:37:45+00:00

I am learning jQuery. I want to use jQuery inside my jsf 2.0 application.

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0