使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的类型错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16166039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
提问by galao
I'm using PrimeFaces 3.5 and JSF 2.0. I wanted to use a jQuery plugin, so I included jQuery in my webapp.
我使用的是 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>
However, when using PrimeFaces components, I get uncaught type errors like this:
但是，当使用 PrimeFaces 组件时，我会遇到如下未捕获的类型错误：
Uncaught TypeError: Cannot read property 'length' of undefined
未捕获的类型错误：无法读取未定义的属性“长度”
Uncaught TypeError: Object [object Object] has no method 'autocomplete'
未捕获的类型错误：对象 [object Object] 没有方法“自动完成”
Uncaught TypeError: Cannot read property 'keyCode' of undefined
未捕获的类型错误：无法读取未定义的属性“keyCode”
Uncaught TypeError: this.jq.draggable is not a function
未捕获的类型错误：this.jq.draggable 不是函数
Uncaught TypeError: Cannot read property 'LinearAxisRenderer' of undefined
未捕获的类型错误：无法读取未定义的属性“LinearAxisRenderer”
Uncaught TypeError: Object [object Object] has no method 'fileupload'
未捕获的类型错误：对象 [object Object] 没有方法“fileupload”
Uncaught TypeError: this.jqEl.datetimepicker is not a function
未捕获的类型错误：this.jqEl.datetimepicker 不是函数
Etc.
等等。
How is this caused and how can I solve it?
这是怎么引起的，我该如何解决？
回答by BalusC
PrimeFaces is a jQuery based JSF component library. It alreadyships 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.
PrimeFaces 是一个基于 jQuery 的 JSF 组件库。它已经附带了 jQuery 和 jQuery UI。出于某种原因，手动加载 jQuery/jQuery UI 的另一个副本是不对的。多个不同版本的 jQuery 文件只会以这种方式相互冲突，因为它们不一定使用/共享完全相同的变量/函数。
Get rid of all those manually loaded jQuery/UI files. This makes no sense.
摆脱所有那些手动加载的 jQuery/UI 文件。这没有任何意义。
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:
如果你这样做是因为你需要在一些不一定使用任何 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" />
(the target="head"is unnecessary if you specify them directly inside <h:head>)
（target="head"如果你直接在里面指定它们是不必要的<h:head>）
If you absolutely need to supply your own version of jQuery, because the one bundled in PrimeFaces is outdated, then you have 2 options:
如果您绝对需要提供自己的 jQuery 版本，因为 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.Unpack
primefaces.jar, replace/META-INF/resources/primefaces/jquery/jquery.jsfile with the newer version (don't change the path nor filename!), repack a newprimefaces.jar.
让您的 web 应用程序在完全相同的资源标识符（库/名称）上提供自己的资源
/resources/primefaces/jquery/jquery.js（不要更改路径或文件名！）。然后将选择这个而不是 PrimeFaces 捆绑的那个。解压
primefaces.jar，用/META-INF/resources/primefaces/jquery/jquery.js新版本替换文件（不要改变路径和文件名！），重新打包一个新的primefaces.jar.
(and don't forget to remove all those <h:outputScript>references to own copy)
（并且不要忘记删除所有<h:outputScript>对自己副本的引用）
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.
测试不过彻底。与 PrimeFaces 捆绑的版本相比，由于较新的 jQuery 版本中的细微更改/错误修复，某些 PrimeFaces 特定功能可能会在升级时中断。
Above all, you should make absolutely sure that you do notprovide 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.
最重要的是，您应该绝对确保您没有提供 jQuery/UI 的多个副本，否则您仍然会面临当前的冲突/冲突。$.noConflict()正如某些人可能建议的那样使用绝对不是为了能够一起使用多个 jQuery 库。它旨在能够将 jQuery 与另一个 JS 库一起使用，该库巧合地也$()用作全局函数，例如 Prototype。另请参阅 ao Jquery 和原型 noconflict。
