如何在 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 中删除 Session 范围的 bean