使用PrimeFaces手动添加/加载jQuery会导致Uncaught TypeErrors [英] Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors

问题描述

我正在使用PrimeFaces 3.5和JSF 2.0.我想使用jQuery插件，所以我将jQuery包含在我的web应用程序中.

I'm using PrimeFaces 3.5 and JSF 2.0. I wanted to use a jQuery plugin, so I included jQuery in my webapp.

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

但是，当使用PrimeFaces组件时，出现如下这样的未捕获类型错误:

However, when using PrimeFaces components, I get uncaught type errors like this:

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

Uncaught TypeError: Cannot read property 'length' of undefined

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

Uncaught TypeError: Object [object Object] has no method 'autocomplete'

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

Uncaught TypeError: Cannot read property 'keyCode' of undefined

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

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

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

Uncaught TypeError: Cannot read property 'LinearAxisRenderer' of undefined

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

Uncaught TypeError: Object [object Object] has no method 'fileupload'

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

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

等等.

这是怎么引起的，我该如何解决?

How is this caused and how can I solve it?

推荐答案

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

PrimeFaces is a jQuery based JSF component library. It already ships with jQuery and jQuery UI out the box. It is not right to manually load another copy of jQuery/jQuery UI for some reason. Multiple different versioned jQuery files would only conflict with each other this way, because they do not necessarily use/share exactly the same variables/functions.

摆脱所有那些手动加载的jQuery/UI文件.这是没有道理的.

Get rid of all those manually loaded jQuery/UI files. This makes no sense.

如果您这样做是因为您需要在某些页面中利用某些jQuery/UI魔术，而不必使用任何PrimeFaces组件(因此，其捆绑的jQuery将不会自动包含在内，因此$()将不可用)，那么您始终可以在以下某些主模板中手动明确地包含PrimeFaces捆绑的jQuery:

If you did this because you need to utilize some jQuery/UI magic in some page which doesn't necessarily use any PrimeFaces components (and thus its bundled jQuery won't be auto-included and thus $() would be unavailable), then you can always manually explicitly include PrimeFaces-bundled jQuery in some master template as below:

<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"，则不需要target="head")

(the target="head" is unnecessary if you specify them directly inside <h:head>)

如果您绝对需要提供自己的jQuery版本，因为PrimeFaces中捆绑的版本已经过时，那么您有2个选择:

If you absolutely need to supply your own version of jQuery, because the one bundled in PrimeFaces is outdated, then you have 2 options:

• 让您的web应用在完全相同的资源标识符(库/名称)中提供自己的资源(/resources/primefaces/jquery/jquery.js)(不要更改路径或文件名！).然后将选择这个，而不是绑定了PrimeFaces的那个.

• Let your webapp supply its own on exactly the same resource identifier (library/name) /resources/primefaces/jquery/jquery.js (don't change the path nor filename!). This one will then be picked instead of the PrimeFaces-bundled one.

解压缩primefaces.jar，用新版本替换/META-INF/resources/primefaces/jquery/jquery.js文件(不要更改路径或文件名！)，重新打包新的primefaces.jar.

Unpack primefaces.jar, replace /META-INF/resources/primefaces/jquery/jquery.js file with the newer version (don't change the path nor filename!), repack a new primefaces.jar.

(并且不要忘记删除所有这些<h:outputScript>引用以拥有自己的副本)

(and don't forget to remove all those <h:outputScript> references to own copy)

进行全面测试.某些PrimeFaces特定的功能可能会随升级而中断，因为与捆绑了PrimeFaces的jQuery版本相比，较新的jQuery版本进行了较小的更改/错误修正.

Test however thorougly. Some PrimeFaces-specific functionality may break with the upgrade because of minor changes/bugfixes in the newer jQuery version as compared to the PrimeFaces-bundled one.

首先，您应绝对确保不不提供jQuery/UI的多个副本，否则您仍然会像目前一样面临冲突/冲突.有人建议使用$.noConflict()绝对不是要能够同时使用多个jQuery库.旨在能够将jQuery与另一个JS库一起使用，该JS库恰好也使用$()作为全局函数，例如Prototype.另请参阅 jQuery和原型noconflict .

Above all, you should make absolutely sure that you do not provide multiple copies of jQuery/UI, or you will still face conflicts/clashes as currently. Using $.noConflict() as some people may suggest is absolutely not intented to be able to use multiple jQuery libraries together. It's intented to be able to use jQuery together with another JS library which coincidentally also uses $() as global function, such as Prototype. See also a.o. Jquery and prototype noconflict.

这篇关于使用PrimeFaces手动添加/加载jQuery会导致Uncaught TypeErrors的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！