如何在 JSF 2.0 中使用 jQuery

Posted

技术标签:

【中文标题】如何在 JSF 2.0 中使用 jQuery【英文标题】:How to use jQuery with JSF 2.0 【发布时间】: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 中的某些内容?

谢谢

【问题讨论】:

【参考方案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

以上是关于如何在 JSF 2.0 中使用 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

如何在 JSF 2.0 中使用表单重新呈现页面的一部分?

如何(以及何时?)在 JSF 2.0 中删除 Session 范围的 bean

JSF 2.0 验证码如何工作

如何在 JSF 2.0 中使会话无效?

如何在 JSF 2.0 中从 javascript 中获取元素

如何在 JSF 2.0 中创建自定义 404 消息?