Cara menggunakan jQuery dengan JSF 2.0

Question

Lebih

Sumber Tidak AMP-versi Sunting

Cara menggunakan jQuery dengan JSF 2.0

Saya sedang belajar jQuery. Saya ingin menggunakan jQuery di dalam aplikasi jsf 2.0 saya. Misalnya saya memiliki file html, di mana saya menggunakan jQuery seperti ini

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

Saya cukup mengunduh file jquery-1.7.1.js dari situs resmi jQuery, memasukkannya ke dalam direktori saya dan kemudian mulai menggunakan jQuery.

File 06.js saya mengandung kode seperti ini

$(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)

Berikut adalah potongan kode file html saya

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

Saya ingin bertanya jika saya membuat halaman yang sama di JSF2.0, maka jQuery akan bekerja dengan cara yang sama atau saya harus downlaod beberapa plugin untuk menggunakan jQuery di dalam aplikasi JSF 2.0 saya? atau untuk memodifikasi sesuatu di dalam web.xml saya?

Terima kasih

Pemrograman

jquery jquery-plugins jsf-2

29 Desember 2011 в 12:38

1 tampilan

Mr.J4mes · Accepted Answer · 2011-12-29T13:04:23+00:00

Cara kerjanya pun sama.

Atribut ID

JSF menambahkan ID formulir ke semua bidang input di dalam formulir. Oleh karena itu, Anda harus berhati-hati dengan pemilih jQuery Anda. Sebagai contoh, misalkan Anda memiliki formulir berikut ini:

Dengan menggunakan jQuery, Anda harus merujuk ke input sebagai: $("#myForm\\:myInput")

Kerangka Kerja

Beberapa framework seperti PrimeFaces, menggunakan komponen yang mungkin tidak berfungsi atau mungkin kehilangan skin jika Anda mengimpor jQuery:

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

Sebagai gantinya, Anda harus menggunakan pustaka jQuery bawaan dengan mengimpor sebagai:

Namun, pustaka jQuery ini termasuk dalam mode konflik yang berarti Anda tidak dapat menggunakan $(). Oleh karena itu, Anda mungkin memerlukan pengaturan tambahan ini:


    $ = jQuery;
    // Then you can use it
    $(document).ready(function() {
        ...
    });