将jQuery添加到PrimeFaces导致所有地方都出现Uncaught TypeError

我正在使用PrimeFaces 3.5和JSF 2.0.我想使用jQuery插件,所以我在我的webapp中包含了jQuery.

<h:head>
    <h:outputScript name="js/jquery.min.js" />
    <h:outputScript name="js/jquery-ui.js" />
</h:head>

但是,在使用PrimeFaces组件时,我会收到类似未捕获的类型错误：

Uncaught TypeError: Cannot read property ‘length’ of undefined

Uncaught TypeError: Object [object Object] has no method ‘autocomplete’

Uncaught TypeError: Cannot read property ‘keyCode’ of undefined

Uncaught TypeError: this.jq.draggable is not a function

Uncaught TypeError: Cannot read property ‘LinearaxisRenderer’ of undefined

Uncaught TypeError: Object [object Object] has no method ‘fileupload’

Uncaught TypeError: this.jqEl.datetimepicker is not a function

等等.

这是怎么造成的,如何解决？

解决方法

PrimeFaces是一个基于jQuery的JSF组件库.它已经附带了jQuery和jQuery UI.由于某种原因,手动加载jQuery / jQuery UI的另一个副本是不对的.多个不同版本的jQuery文件只会以这种方式相互冲突,因为它们不一定使用/共享完全相同的变量/函数.

摆脱所有那些手动加载的jQuery / UI文件.这毫无意义.

如果你这样做是因为你需要在一些不一定使用任何PrimeFaces组件的页面中使用一些jQuery / UI魔法(因此它的捆绑jQuery不会被自动包含,因此$()将不可用),那么您可以随时在某些主模板中手动显式包含PrimeFaces捆绑的jQuery,如下所示：

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

(如果直接在< h：head>内指定它们,则target =“head”是不必要的)

如果你绝对需要提供自己的jQuery版本,因为PrimeFaces中捆绑的那个已经过时了,那么你有两个选择：

>让您的webapp在完全相同的资源标识符(库/名称)/resources/primefaces/jquery/jquery.js上提供自己的(不要更改路径或文件名！).然后将选择这个而不是PrimeFaces捆绑的那个.
>解压缩primefaces.jar,用新版本替换/meta-inf/resources/primefaces/jquery/jquery.js文件(不要更改路径或文件名！),重新打包一个新的primefaces.jar.

(并且不要忘记删除所有那些< h：outputScript>对自己副本的引用)

然而,测试彻底.一些PrimeFaces特定的功能可能会因升级而中断,因为与PrimeFaces捆绑的版本相比,较新的jQuery版本中的细微更改/错误修正.

最重要的是,您应该确保不提供jQuery / UI的多个副本,否则您仍将面临当前的冲突/冲突.有些人可能会建议使用$.noConflict()绝对不能同时使用多个jQuery库.它的目的是能够将jQuery与另一个JS库一起使用,巧合的是它还使用$()作为全局函数,例如Prototype.另见a.o. Jquery and prototype noconflict.

原文地址：https://www.jb51.cc/jquery/177786.html