如何在 JSF 2.0 中使用 jQuery答案

【问题标题】：How to use jQuery with JSF 2.0如何在 JSF 2.0 中使用 jQuery
【发布时间】：2012-01-29 21:05:06
【问题描述】：

我正在学习 jQuery。我想在我的 jsf 2.0 应用程序中使用 jQuery。就像我有 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 官网下载了 jquery-1.7.1.js 文件，将它包含在我的目录中，然后开始使用 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文件代码sn-p

<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 将以相同的方式工作，或者我必须下载一些插件才能在我的 JSF 2.0 应用程序中使用 jQuery？或修改我的 web.xml 中的某些内容？

谢谢

【问题讨论】：

标签： jquery jquery-plugins jsf-2

【解决方案1】：

它的工作方式相同。

ID 属性

JSF 将表单的 ID 附加到表单内的所有输入字段。因此，您需要小心使用 jQuery 选择器。例如，假设您有以下表格：

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

使用 jQuery，您必须将输入引用为：$("#myForm\\:myInput")

框架

如果您使用以下方式导入 jQuery，某些框架（例如 PrimeFaces）使用的组件可能无法工作或可能会丢失其外观：

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

【讨论】：

@edze 谢谢。你说要小心像myForm:myInput 这样的ID。我想问，如果我使用prependId=false 会怎样。然后我只有myInput 作为ID 而不是myForm:myInput。谢谢
@Basit：有关preprendID="false" 的简短讨论，请参阅此answer。你不应该过度使用它。
呃。我在这方面的经历很糟糕：）我为这些事情编写了一个自己的渲染器，我可以用转义的 ID 对我的 jQuery 部分进行编码。
应该是$("#myForm\\:myInput")。你错过了#符号
完整答案here