CODEWITHSUNDEEP
jsf-2richfaces
Nav
Nav

Reputation: 447

jQuery is not defined in RichFaces scripts

I've been migrating aplication from EJB to JSF + Spring and doing this, I updated RichFaces from 3.3.1 to 4.1.0. Now I'm struggling with following problem, that the console in chrome shows

Uncaught ReferenceError: jQuery is not defined

in RichFaces scripts like richfaces-event.js, popupPanel.js.
I know that in header of the html file, including of the jQuery file should be first, but I've looked into the former application and this scripts are also included there before jQuery and no errors appear. What's more, I don't now how I could change this, because these scripts are added implicitly by having:

<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">

How can I fix this problem?

<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>

The problem here is not lightbox but RichFaces.The html code generated is:

<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>

But is the application I'm migrating, the code is the same and console does not show any errors

Upvotes: 0

Views: 2771

Answers (1)

Alexandre Lavoie
Alexandre Lavoie

Reputation: 8771

You should load your JavaScript libraries in the right order. If you see the source of the rendered page you will see that jQuery is loaded in second or not at all because of the library="js".

Modify the inclusion like that :

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

Note :

The jQuery used will come from RichFaces, you wont be able to use the $ descriptor. You will need to use jQuery("your-selector")... instead. You will also need to put the LightBox library in <web-root>/resources/js/jquery.lightbox-0.5.js so it will be found.

Upvotes: 1

Related Questions