Richfaces 捆绑的 jQuery 包含在 webapp 捆绑的 JavaScript 文件之后答案

【问题标题】：Richfaces-bundled jQuery is included after webapp-bundled JavaScript filesRichfaces 捆绑的 jQuery 包含在 webapp 捆绑的 JavaScript 文件之后
【发布时间】：2012-08-17 19:14:19
【问题描述】：

我最近将我的 Richfaces 库升级到 4.2.2.Final，我注意到 与 Richfaces 捆绑的 jquery 库现在位于我的自定义脚本下方，使其无法使用。

这是生成的 html：

<head><title lang="fr">Massaï, bronze, 2008 / Jean-Baptiste Martin Sculptures</title>
                <meta name="description" content="Sculpture en bronze d'une femme massai. 2008." lang="fr" />
        <meta name="keywords" content="Jean-Baptiste Martin, sculpture, sculpteur, oeuvre, bronze, portrait, statue, tête, visage, plâtre, moule, moulage, fonte, modèle, modelage, nu" lang="fr" />
        <link rel="icon" type="image/png" href="/images/favicon-32x32.png" />
        <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="/css/carousel.css" type="text/css" media="screen" />
                <script language="javascript" type="text/javascript" src="/js/jquery.mousewheel.js"></script>
                <script language="javascript" type="text/javascript" src="/js/jcarousellite_1.0.1.js"></script>
                <script language="javascript" type="text/javascript" src="/js/init-sculpture.js"></script>
                <script language="javascript" type="text/javascript" src="/js/jquery.formulaire-inscription.js"></script><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-queue.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/component-control.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanel.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanelBorders.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanelSizer.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/rfRes/popupPanel.ecss.jsf?db=eAG7mShzEgAFjAIg&amp;ln=org.richfaces" /><script type="text/javascript" src="/javax.faces.resource/status.js.jsf?ln=org.richfaces"></script>
</head>

下面是对应的facelets：

 <h:head>
        <ui:insert name="title-bar-title" />
        <ui:insert name="meta-description"/>
        <meta name="keywords" content="#{msg['meta.mots.clefs']}" lang="#{view.locale.language}"/>
        <link rel="icon" type="image/png" href="#{facesContext.externalContext.requestContextPath}/images/favicon-32x32.png" />
        <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/screen.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/layout.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/css/carousel.css" type="text/css" media="screen" />
        <ui:insert name="javascript"/>
    </h:head>

谁能帮我解决这个问题？

编辑：这里是对应的js：

    <ui:define name="javascript">
        <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.mousewheel.js"/>
        <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/jcarousellite_1.0.1.js"/>
        <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/init-sculpture.js"/>
        <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/jquery.formulaire-inscription.js"/>
    </ui:define>

编辑：按照建议修改后：

<link rel="icon" type="image/png" href="/images/favicon-32x32.png" /><link type="text/css" rel="stylesheet" href="/javax.faces.resource/css/screen.css.jsf" /><link type="text/css" rel="stylesheet" href="/javax.faces.resource/css/layout.css.jsf" /><link type="text/css" rel="stylesheet" href="/javax.faces.resource/css/carousel.css.jsf" /><script type="text/javascript" src="/javax.faces.resource/js/jquery.mousewheel.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/js/jcarousellite_1.0.1.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/js/init-sculpture.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/js/jquery.formulaire-inscription.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-queue.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/javax.faces.resource/component-control.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanel.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanelBorders.js.jsf?ln=org.richfaces"></script><script type="text/javascript" src="/javax.faces.resource/popupPanelSizer.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/rfRes/popupPanel.ecss.jsf?db=eAG7mShzEgAFjAIg&amp;ln=org.richfaces" /><script type="text/javascript" src="/javax.faces.resource/status.js.jsf?ln=org.richfaces"></script>

编辑：修改后的 facelet：

<h:head>
    <ui:insert name="title-bar-title" />
    <ui:insert name="meta-description" />
    <meta name="keywords" content="#{msg['meta.mots.clefs']}" lang="#{view.locale.language}" />
    <link rel="icon" type="image/png" href="#{facesContext.externalContext.requestContextPath}/images/favicon-32x32.png" />
    <h:outputStylesheet name="css/screen.css"/>
    <h:outputStylesheet name="css/layout.css"/>
    <h:outputStylesheet name="css/carousel.css"/>
    <h:outputScript name="js/jquery.mousewheel.js" target="head"/>
    <h:outputScript name="js/jcarousellite_1.0.1.js" target="head"/>
    <h:outputScript name="js/init-sculpture.js" target="head"/>
    <h:outputScript name="js/jquery.formulaire-inscription.js" target="head"/>
</h:head>

【问题讨论】：

标签： javascript jsf richfaces facelets

【解决方案1】：

您没有以正确的方式使用 JSF 资源管理。

删除

<ui:insert name="javascript"/>

并且替换笨拙的

<ui:define name="javascript">
    <script language="javascript" type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.mousewheel.js"/>
    <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/jcarousellite_1.0.1.js"/>
    <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/init-sculpture.js"/>
    <script language="javascript" type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/jquery.formulaire-inscription.js"/>
</ui:define>

通过更简单的方式（只需以这种方式放入模板，使其最终出现在<h:body>）

<h:outputScript name="js/jquery.mousewheel.js" target="head" />
<h:outputScript name="js/jcarousellite_1.0.1.js" target="head" />
<h:outputScript name="js/init-sculpture.js" target="head" />
<h:outputScript name="js/jquery.formulaire-inscription.js" target="head" />

在您将/js 文件夹移动到公共网络内容的/resources 文件夹中。

WebContent
 |-- resources
 |    `-- js
 |         |-- jquery.mousewheel.js
 |         |-- jcarousellite_1.0.1.js
 |         |-- init-sculpture.js
 |         `-- jquery.formulaire-inscription.js
 :

【讨论】：

感谢 BalusC。我已按照建议修改了我的页面。不幸的是，问题仍然存在：自定义脚本包含在 jquery 库之上...
他们应该进入<h:body>，而不是<h:head>。然后他们将被重新定位到<head>的最后。