Как использовать jQuery с JSF 2.0 - PullRequest
19 голосов
/ 29 декабря 2011

Я изучаю JQuery. Я хочу использовать jQuery внутри моего приложения jsf 2.0. Как у меня есть HTML-файл, в котором я использую jQuery, как это

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

Я просто скачал файл jquery-1.7.1.js с официального сайта jQuery, включил его в свой каталог и начал использовать jQuery.

Мой код файла 06.js как этот

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

Вот мой фрагмент кода HTML-файла

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

Я хочу спросить, создаю ли я ту же страницу на JSF2.0, тогда jQuery будет работать таким же образом, или мне нужно загрузить какой-нибудь плагин для использования jQuery внутри моего приложения JSF 2.0? или изменить что-то внутри моего web.xml?

Спасибо

1 Ответ

34 голосов
/ 29 декабря 2011

Работает так же.

Атрибуты ID

JSF добавляет идентификатор формы ко всем полям ввода внутри формы. Следовательно, вы должны быть осторожны с вашими селекторами jQuery. Например, предположим, что у вас есть следующая форма:

<h:form id="myForm">
   <h:inputText id="myInput" />
</h:form>

Используя jQuery, вы должны ссылаться на вход как: $("#myForm\\:myInput")

рамочные

В некоторых средах, таких как PrimeFaces, используются компоненты, которые могут не работать или могут потерять свою оболочку, если вы импортируете jQuery с:

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

Вместо этого вы должны использовать их встроенную библиотеку jQuery, импортировав как:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

Эта библиотека jQuery, однако, включена в режим конфликта, что означает, что вы не можете использовать $(). Следовательно, вам может понадобиться эта дополнительная настройка:

<h:outputScript target="head">
    $ = jQuery;
    // Then you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...