正文 

当前位置： 首页 > 问答 >

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

     2023-02-23     85

关键词：

【中文标题】使用 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" />

（如果您直接在&lt;h:head&gt; 中指定target="head"，则不需要它们）

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

让您的 webapp 在完全相同的资源标识符（库/名称）/resources/primefaces/jquery/jquery.js 上提供自己的资源（不要更改路径或文件名！）。然后将选择这个而不是 PrimeFaces 捆绑的那个。

解压primefaces.jar，用新版本替换/META-INF/resources/primefaces/jquery/jquery.js文件（不要更改路径和文件名！），重新打包一个新的primefaces.jar。

（不要忘记删除所有对自己副本的 &lt;h:outputScript&gt; 引用）

无论多么彻底地测试。由于与 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。删除它就可以了。

primefaces 实时滚动是不是与延迟加载兼容

】primefaces实时滚动是不是与延迟加载兼容【英文标题】：IsprimefaceslivescrollingcompatiblewithLazyloadingprimefaces实时滚动是否与延迟加载兼容【发布时间】：2014-04-0708:20:42【问题描述】：我有一个需要显示大量数据集的数据表。所以我... 查看详情

在 PrimeFaces 中添加 Angular Js - JSF

】在PrimeFaces中添加AngularJs-JSF【英文标题】：AddAngularJsinPrimeFaces-JSF【发布时间】：2016-07-2719:11:45【问题描述】：我已经有一个带有PrimeFaces的JSF项目，但现在我需要在我的项目中添加Angularjs。有primefaces的标签所以我不知道如何使... 查看详情

如何在 Primefaces DataTable 中使用 Font Awesome（或其他字体图标）而不是 jQuery sprite？

】如何在PrimefacesDataTable中使用FontAwesome（或其他字体图标）而不是jQuerysprite？【英文标题】：HowcanIuseFontAwesome(orotherfonticons)insteadofthejQueryspritesinPrimefacesDataTable?【发布时间】：2016-04-2316:55:28【问题描述】：我正在使用PrimeFaces生成... 查看详情

延迟加载和解析 PrimeFaces JavaScript 文件

】延迟加载和解析PrimeFacesJavaScript文件【英文标题】：DeferloadingandparsingofPrimeFacesJavaScriptfiles【发布时间】：2014-06-0402:46:07【问题描述】：在使用GooglePageSpeed分析JSF2.1+PrimeFaces4.0webapp的性能时，它建议延迟解析JavaScript文件。在带有... 查看详情

如何手动在 FlatList react-native（意味着 -10 - 10 条记录）中使用 Spinner 添加加载更多记录！不是从使用服务器端

】如何手动在FlatListreact-native（意味着-10-10条记录）中使用Spinner添加加载更多记录！不是从使用服务器端【英文标题】：HowtoaddloadmorerecordswithSpinnerinFlatListreact-native(means-10-10records)manually!notfromusingserverside【发布时间】：2018-10-1312:... 查看详情

如何从jsf / primefaces中的托管bean向页面添加组件[重复]

】如何从jsf/primefaces中的托管bean向页面添加组件[重复]【英文标题】：howtoaddacomponenttothepagefromamanagedbeaninjsf/primefaces[duplicate]【发布时间】：2014-01-2218:44:16【问题描述】：单击命令按钮应触发ManagedBean中的操作：将新的“outputText”... 查看详情

与 primefaces 集成时无法加载 jsf.page

】与primefaces集成时无法加载jsf.page【英文标题】：can\'tloadjsf.pagewhenintegratedwithprimefaces【发布时间】：2012-05-2614:29:36【问题描述】：当我想实现jsf2.0、primefaces3.1.1和springframework3.0.2时遇到问题，我无法在身份验证登录页面成功后加... 查看详情

Primefaces graphicsImage仅在第一次加载时显示图像[重复]

】PrimefacesgraphicsImage仅在第一次加载时显示图像[重复]【英文标题】：PrimefacesgraphicImageonlyshowtheimagethefirsttimeitloads[duplicate]【发布时间】：2021-10-2122:40:54【问题描述】：环境：Primefaces10JSF2.3我正在尝试在模板jsf页面上加载个人资料... 查看详情

Primefaces DataTable、延迟加载和每行命令按钮

】PrimefacesDataTable、延迟加载和每行命令按钮【英文标题】：PrimefacesDataTable,lazyloadingandCommandButtonperrow【发布时间】：2012-08-0818:27:41【问题描述】：我有这个简单的页面：<h:formid="form"><p:dataTablevalue="#testBean.unitTypeModel"var="elem... 查看详情

当方法执行更新时刷新延迟加载的 Primefaces 数据表

】当方法执行更新时刷新延迟加载的Primefaces数据表【英文标题】：refreshlazyloadedPrimefacesdatatablewhenamethodperformsanupdate【发布时间】：2015-01-3005:16:42【问题描述】：当我通过JDBC方法更新数据库中的数据时，它会被持久化，但primefaces... 查看详情

PrimeFaces 从延迟加载数据表中导出数据

】PrimeFaces从延迟加载数据表中导出数据【英文标题】：PrimeFacesExportdatafromaLazyloadingDataTable【发布时间】：2013-06-1709:23:25【问题描述】：我想在报告生成期间导出具有LazyLoadDataModel的数据表（带分页）。问题：当我导出时，报告从... 查看详情

如何在 JSF 上延迟 Primefaces AjaxStatus？

】如何在JSF上延迟PrimefacesAjaxStatus？【英文标题】：HowtodelayPrimefacesAjaxStatusonJSF?【发布时间】：2016-10-1311:17:18【问题描述】：如何在Primefaces的AjaxStatus显示时添加延迟（例如300毫秒）。现在，当有一个Ajax请求挂起时，它总是立即... 查看详情

Primefaces p:graphicImage 动态内容无法加载 404

】Primefacesp:graphicImage动态内容无法加载404【英文标题】：Primefacesp:graphicImagedynamicContentfailedtoload404【发布时间】：2021-04-1511:42:51【问题描述】：显示p:graphicImage动态内容让我已经忙了好几天了。谁能帮帮我，我将不胜感激。我有... 查看详情

Primefaces选项卡ajax部分更新错误

】Primefaces选项卡ajax部分更新错误【英文标题】：Primefacestabajaxpartialupdatebug【发布时间】：2013-03-1204:39:21【问题描述】：我相信在尝试使用ajax对其进行部分更新时，primefaces中存在错误。我在primefaces论坛上发布了相同的查询，但... 查看详情

Primefaces 数据表重置分页

】Primefaces数据表重置分页【英文标题】：Primefacesdatatableresetpagination【发布时间】：2013-08-2819:23:48【问题描述】：我在搜索实用程序中使用带有分页器的dataTable组件，它运行良好，但在将分页器页面重置为第一页时出现问题。例... 查看详情

Google BigQuery：如何手动添加分区

...然后将数据加载到其中吗？我该怎么做？有什么方法可以使用“BQlo 查看详情

primefaces上传没有做任何事情[重复]

】primefaces上传没有做任何事情[重复]【英文标题】：primefacesuploadnotdoinganything[duplicate]【发布时间】：2013-01-1119:19:30【问题描述】：我现在正在尝试使用primefaces而不是自制的文件上传系统，我遇到的唯一问题是它似乎什么也没做... 查看详情

将 PrimeFaces 与 JSF 一起使用时 Shiro 重定向到错误的位置

】将PrimeFaces与JSF一起使用时Shiro重定向到错误的位置【英文标题】：ShiroredirectingtowrongplacewhenusingPrimeFaceswithJSF【发布时间】：2012-12-1010:20:34【问题描述】：此Web应用程序可与Shiro和JSF一起使用。我添加了PrimeFaces，但我遇到了登录... 查看详情