34

我在 JSF 页面的标题中包含了 JQuery1.5。在那个页面中有一堆已经编码的 Primefaces 组件。在我将 包含Jquery.js在页面的标题中之后，一些 primefaces 组件就像<p:commandButton>失去了它们的皮肤，<p:fileUpload>变得看起来像普通的 JSP<input type="file">并完全失去了它的 AJAX 功能。

有没有办法安全地使用 JQuery 和 primefaces（没有冲突）？

4

7 回答 7

51

我遇到了与问题中描述的相同的问题。这就是为什么我想出了以下解决方案：

包含 primefaces 内置 jQuery 库（当前为 1.4.1），因为包含自己的 jQuery 库会导致 CSS 格式问题。添加target="head"属性允许在任何地方指定标签 - 例如，当使用模板时，您并不总是可以访问<head>标签：

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

primefaces jQuery 库默认包含在冲突模式中。这意味着$()不能使用快捷方式。<script>要克服此问题，请在or<h:outputScript>标记中包含以下行：

<h:outputScript target="head">
    // Add the $() function
    $ = jQuery;
    // Now you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

到目前为止，这是我可以使用 primefaces 2.2.1 挖掘出的最佳解决方案。

于 2011-04-01T07:47:57.510 回答
43

为什么不将 jquery 包与 PrimeFaces 一起使用？

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

PrimeFaces 2.2.1 有 jQuery 1.4.4，3.0（开发中）有 1.5.1。

于 2011-03-28T10:01:39.710 回答
7

许多 JavaScript 库使用$作为函数或变量名，就像 jQuery 一样。在 jQuery 的例子中，$只是jQuery的别名，所以所有功能都可以在不使用$的情况下使用。以下是一些方法：

  • jQuery.noConflict();在 jQuery 初始化之前 编写，见下文

    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

于 2011-03-28T09:58:06.597 回答
6

我的解决方案是在默认页面中添加此代码：

<script type="text/javascript">var $j = jQuery.noConflict(true);</script>

之后我使用jquery：

$j

谢谢，

于 2014-06-18T16:57:02.577 回答
3

jQuery 有一个“ noConflict ”模式，允许它与其他库很好地并排运行。我没有使用过 Primefaces 组件，所以我不确定，但如果你在无冲突模式下包含 jQuery，你的问题可能会消失。

于 2011-03-28T09:57:32.760 回答
3

我的经验：

我有同样的问题，从来没有得到它与两个 jquery 库一起工作。（我使用jQuery而不是$但从未尝试过jQuery.noConflict()）。

我的解决方案是仅使用与primefaces 捆绑的lib，如Cagatays 回答中所述。

于 2011-03-28T10:10:39.117 回答
1

解决 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。

于 2016-03-04T17:02:43.000 回答