使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的 TypeErrors

Posted 2023-02-23

【中文标题】使用 PrimeFaces 手动添加/加载 jQuery 会导致未捕获的 TypeErrors

【英文标题】：Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors

【发布时间】：2013-04-16 11:20:07

【问题描述】：

我正在使用 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: Object [object Object] has no method 'autocomplete'

未捕获的类型错误：无法读取未定义的属性“keyCode”

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

未捕获的类型错误：无法读取未定义的属性“LinearAxisRenderer”

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

未捕获的类型错误：this.jqEl.datetimepicker 不是函数

等等

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

【问题讨论】：

您是否在 web.xml 中添加了 和 标签？喜欢here？

是的，文件上传功能没有问题。上传文件就像一个魅力，唯一的问题是它给了我一个 jquery 的类型错误，这给我的其他 jquery 函数带来了问题。

再猜一个，也许你正在尝试包含 jquery 库，它可能与 PF 的 jquery 冲突。

嗨，是的，我包含了更高版本的 jquery.js，因为我目前正在使用库 tag-it 参考：github.com/aehlke/tag-it。因为如果我不这样做，我会得到一个Uncaught TypeError: Object [object Object] has no method 'autocomplete' tag-it.js:294

那你应该试试$.noConflict(true); 比如here

【参考方案1】：

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 捆绑的版本相比，较新的 jQuery 版本中的细微更改/错误修复，某些 PrimeFaces 特定功能可能会因升级而中断。

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

【讨论】：

嗨，是的，我包含了更高版本的 jquery.js，因为我目前正在使用库 tag-it 参考：github.com/aehlke/tag-it。因为如果我不这样做，我会得到一个Uncaught TypeError: Object [object Object] has no method 'autocomplete' tag-it.js:294

同样，您不应该提供另一个 jQuery 副本。相反，升级/覆盖 PrimeFaces 提供的。

我的 web.xml 引用了参数名称 org.omnifaces.CDN_RESOURCE_HANDLER_URLS 的过时 jquery。删除它就可以了。