JQuery 与 Primefaces 冲突？ [复制]
Posted
技术标签:
【中文标题】JQuery 与 Primefaces 冲突？ [复制]【英文标题】：JQuery Conflicts with Primefaces? [duplicate] 【发布时间】：2011-07-24 08:36:37 【问题描述】：我在 JSF 页面的标题中包含了 JQuery1.5。在那个页面中有一堆已经编码的 Primefaces 组件。在我将Jquery.js 包含在页面标题中后，一些primefaces 组件（如<p:commandButton>）失去了它们的皮肤，<p:fileUpload> 看起来像普通的JSP <input type="file"> 并完全失去了它的AJAX 功能。
有没有办法安全地使用 JQuery 和 primefaces（没有冲突）？
【问题讨论】：
我不明白为什么这个问题被标记为This question has been ask before。链接的问题是在此问题后 2 年提出的。 【参考方案1】：我遇到了与问题中描述的相同的问题。这就是为什么我想出了以下解决方案：
包含 primefaces 内置 jQuery 库（当前为 1.4.1），因为包含自己的 jQuery 库会导致 CSS 格式问题。添加 target="head" 属性允许在任何地方指定标签 - 例如使用模板时，您并不总是可以访问<head> 标签：
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
primefaces jQuery 库默认包含在冲突模式中。这意味着不能使用 $() 快捷方式。要解决此问题，请在 <script> 或 <h:outputScript> 标记中添加以下行：
<h:outputScript target="head">
// Add the $() function
$ = jQuery;
// Now you can use it
$(document).ready(function()
...
);
</h:outputScript>
这是迄今为止我能找到的最好的解决方案，使用 primefaces 2.2.1。
【讨论】：
除了上面的 Lars 解释之外，Primefaces 不会在不使用 Primefaces 组件的页面上自动包含 jQuery，即使 Primefaces 命名空间是在 标签中定义的，所以您可以使用上面 Lars 解释的方法或更改您的组件之一以使用 Primefaces 组件实现，例如将为什么不将 jquery 包与 PrimeFaces 一起使用？
<h:outputScript library="primefaces" name="jquery/jquery.js" />
PrimeFaces 2.2.1 有 jQuery 1.4.4，3.0（开发中）有 1.5.1。
【讨论】：
附带说明，2.2.1 的 jquery 默认启用 noconflict，而 3.0 的 jquery 没有 noconflict on。【参考方案3】：许多 javascript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的情况下，$ 只是 jQuery 的别名，因此所有功能都可以在不使用 $ 的情况下使用。以下是一些方法：
在jQuery初始化之前写jQuery.noConflict();，见下文
jQuery.noConflict();
$(document).ready(function()
// your jQuery code
);
创建一个不同的别名而不是 jQuery 以在脚本的其余部分中使用。
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
更改 $ 的所有实例：在 jQuery 代码块中将 $ 替换为 jQuery
jQuery(document).ready(function)
jQuery("div p").hide();
)
将 jQuery 完全移动到另一个对象中的新命名空间。
var dom = ;
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div p").hide();
将 $ 的范围设置为本地而不是全局
// Method 1
jQuery(document).ready(function($)
$("div").hide();
);
// Method 2
(function($)
/* some code that uses $ */
)(jQuery);
注意：这一点有一个缺点，您将无法访问其他库的 $() 方法。
Original Reference
【讨论】：
【参考方案4】：我的解决方案是在默认页面中添加此代码：
<script type="text/javascript">var $j = jQuery.noConflict(true);</script>
之后我使用 jquery：
$j
谢谢，
【讨论】：
【参考方案5】：jQuery 有一个 'noConflict' 模式，可以很好地与其他库一起玩。我没有使用过 Primefaces 组件，所以我不确定，但如果你在无冲突模式下包含 jQuery，你的问题可能会消失。
【讨论】：
【参考方案6】：我的经验：
我遇到了同样的问题，但从来没有使用过这两个 jquery 库。 （我使用jQuery 而不是$，但从未尝试过jQuery.noConflict()）。
我的解决方案是仅使用与 primefaces 捆绑的库，如 Cagatays 回答中所述。
【讨论】：
我也一样。我只能使用 jQuery 内置的 primefaces；当使用我自己的 jQuery 库时，CSS 样式将被破坏。这意味着我只能使用 jQuery() 函数而不是 $()。【参考方案7】：为了解决Primefaces和jQuery之间的冲突，避免导入任何外部的jQuery文件，所以为了解决这个问题，导入位于primefaces jar中的jQuery文件
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
并在您的 jQuery 代码中将 $ 替换为 jQuery。
【讨论】：
为什么不改进 39 个投票的答案，而不是创建一个几乎相同的答案？以上是关于JQuery 与 Primefaces 冲突？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
Primefaces 是不是能够从另一个域获取 jquery？
Primefaces - 当焦点在输入字段中时，Jquery 热键只工作一次
使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的 TypeErrors