本文介绍了JQuery 与 Primefaces 冲突?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 JSF 页面的标题中包含了 JQuery1.5.在那个页面中有一堆已经编码的 Primefaces 组件.在我在页面的标题中包含 Jquery.js 之后,一些主要的组件,如 <p:commandButton> 失去了它们的皮肤和 <p:fileUpload> 变得像普通的 JSP 并且完全失去了它的 AJAX 功能.

I have included JQuery1.5 in the header of a JSF page. In that page there is a bunch of Primefaces components already coded. After I have included the Jquery.js in the header of the page, some primefaces components like <p:commandButton> loses their skin and <p:fileUpload> becomes looking like normal JSP <input type="file"> and losing its AJAX capability entirely.

有没有办法安全地使用 JQuery 和 primefaces(没有冲突)?

Is there a way to use JQuery safely along with primefaces(without conflict)?

推荐答案

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

I had the same problem as described in the question. That's why I came up with the following solution:

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

Include the primefaces built-in jQuery library (currently 1.4.1) as including an own jQuery library leads to CSS formatting problems. Adding the target="head" attribute allows for specifying the tag everywhere - e.g. when using templating you not always have access to the <head> tag:

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

primefaces jQuery 库默认包含在冲突模式中.这意味着不能使用 $() 快捷方式.要解决此问题,请在 标记中包含以下行:

The primefaces jQuery library is included by default in conflict mode. That means the $() shortcut cannot by used. To overcome this issue include the following line in a <script> or <h:outputScript> tag:

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

这是迄今为止我能找到的最好的解决方案,使用 primefaces 2.2.1.

That's the best solution I could dig out so far, using primefaces 2.2.1.

这篇关于JQuery 与 Primefaces 冲突?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 17:23
查看更多