jQuery 没有在 RichFaces 脚本中定义答案

【问题标题】：jQuery is not defined in RichFaces scriptsjQuery 没有在 RichFaces 脚本中定义
【发布时间】：2013-05-27 14:11:24
【问题描述】：

我一直在将应用程序从 EJB 迁移到 JSF + Spring，并为此将 RichFaces 从 3.3.1 更新到 4.1.0。现在我正在努力解决以下问题，chrome 中的控制台显示

Uncaught ReferenceError: jQuery is not defined

在 RichFaces-event.js、popupPanel.js 等 RichFaces 脚本中。
我知道在 html 文件的标题中，应该首先包含 jQuery 文件，但是我已经查看了以前的应用程序，并且在 jQuery 之前也包含了这个脚本，并且没有出现错误。更重要的是，我现在不知道如何更改它，因为这些脚本是通过以下方式隐式添加的：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

我该如何解决这个问题？

<f:view contentType="text/html" locale="#{localeSelector.language}">
<h:head>
    <title>#{messages['news.title']}</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css"
        href="css/jquery.lightbox-0.5.css" media="screen" />
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

</h:head>


<h:body>
    <h:outputScript name="jquery.js" library="js" target="head" />
    <div id="container">
            </div>
    </h:body>
</f:view>
</html>

这里的问题不是灯箱而是RichFaces。生成的html代码是：

<script type="text/javascript" src="/ESA/javax.faces.resource/richfaces-event.js.xhtml">        </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanel.js.xhtmlln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelBorders.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelSizer.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.js.xhtml?ln=js">   </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.lightbox-0.5.js.xhtml?ln=js"></script>

但是我要迁移的应用程序，代码是一样的，控制台没有显示任何错误

【问题讨论】：

您可以显示文件的其余部分吗？你直接导入jQuery吗？你用<h:head>吗？您是否从 /lib 文件夹中删除了以前的库？
已添加代码。如您所见，我使用了<h:head> 标签，但它仍然无法正常工作。 /lib 文件夹已被清除，并且没有以前的库出现在那里。

标签： jsf-2 richfaces

【解决方案1】：

您应该以正确的顺序加载您的 JavaScript 库。如果您看到渲染页面的源代码，您会看到 jQuery 被加载第二个或根本没有加载，因为 library="js"。

像这样修改包含：

<h:head>
    <h:outputScript name="jquery.js" />
    <h:outputScript name="js/jquery.lightbox-0.5.js" />
</h:head>

注意：

使用的jQuery 将来自RichFaces，您将无法使用$ 描述符。您将需要改用jQuery("your-selector")...。您还需要将 LightBox 库放在 <web-root>/resources/js/jquery.lightbox-0.5.js 中，以便找到它。

【讨论】：

但在生成的 html 代码中，RichFaces 脚本在 jQuery 和 LightBox 之前，控制台显示问题出在他们，而不是 LightBox
@Nav 生成的代码是来自您的迁移版本还是旧版本？即：RichFaces 3.3 或 RichFaces 4.1
生成的 htmls（以前的和新的）都有相同的脚本序列。首先出现 RichFaces 脚本，确切地说是：richfaces-event.js, popupPanel.js, popupPanelBorders.js, popupPanelSizer.js。旧的是 3.3.1，新的是 4.1
@Nav 不确定，您在问题中的更新（包括脚本）来自 RF 3.3 或 RF 4.1 的版本？如果它们不同，您应该包含其他版本的输出。
但这两个 .xhtml 文件是相同的，因为我只是将文件从以前的应用程序复制到新的应用程序，并将 maven 工件更改为 RichFaces 4.1。两个版本的输出是一样的。