I recently upgraded my Richfaces library to 4.2.2.Final and I noticed that the jquery library bundled with Richfaces is now located below my custom scripts making them unusable.
Here is the resulting 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&ln=org.richfaces" /><script type="text/javascript" src="/javax.faces.resource/status.js.jsf?ln=org.richfaces"></script>
</head>
Here is the corresponding 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>
Can anyone please help me sort this problem?
EDIT: Here is the corresponding 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>
EDIT: after modifying as advised:
<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&ln=org.richfaces" /><script type="text/javascript" src="/javax.faces.resource/status.js.jsf?ln=org.richfaces"></script>
EDIT: The modified 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>
You're not using the JSF resource management the right way.
Remove the
<ui:insert name="javascript"/>
And replace the clumsy
<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>
by the simpler (just put in template that way so that it end up in <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" />
after you've moved the /js
folder into the /resources
folder of the public webcontent.
WebContent
|-- resources
| `-- js
| |-- jquery.mousewheel.js
| |-- jcarousellite_1.0.1.js
| |-- init-sculpture.js
| `-- jquery.formulaire-inscription.js
: