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

Question

我正在使用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组件时,我会收到类似未捕获的类型错误:

未捕获的TypeError:无法读取未定义的属性"长度"

未捕获的TypeError:对象[object Object]没有方法'autocomplete'

未捕获的TypeError:无法读取未定义的属性'keyCode'

未捕获的TypeError:this.jq.draggable不是函数

未捕获的TypeError:无法读取未定义的属性"LinearAxisRenderer"

未捕获的TypeError:对象[object Object]没有方法'fileupload'

未捕获的TypeError:this.jqEl.datetimepicker不是函数

等等.

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

Answer 1

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

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

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

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

(target="head"如果你直接在里面指定它们是没有必要的<h: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库一起使用,这个JS库同时也$()用作全局函数,例如Prototype.另见ao Jquery和原型noconflict.