使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的类型错误 [英] Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors

问题描述

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

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:

未捕获的类型错误:无法读取未定义的属性长度"

Uncaught TypeError: Cannot read property 'length' of undefined

未捕获的类型错误:对象 [object Object] 没有方法自动完成"

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

未捕获的类型错误:无法读取未定义的属性keyCode"

Uncaught TypeError: Cannot read property 'keyCode' of undefined

未捕获的类型错误:this.jq.draggable 不是函数

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

未捕获的类型错误:无法读取未定义的属性LinearAxisRenderer"

Uncaught TypeError: Cannot read property 'LinearAxisRenderer' of undefined

未捕获的类型错误:对象 [object Object] 没有方法 'fileupload'

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

未捕获的类型错误: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" />

(如果您直接在 中指定它们，则不需要 target="head")

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

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

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.

(不要忘记删除所有对自己副本的 引用)

无论如何都要彻底测试.与 PrimeFaces 捆绑的版本相比，某些 PrimeFaces 特定的功能可能会因升级而中断，因为较新的 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 库一起使用，该库巧合地也使用 $() 作为全局函数，例如 Prototype.另见 a.o.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 会导致未捕获的类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！