Uncaught ReferenceError: $ is not defined JSF Primefaces (h:head included)

Question

I have a simple JSF page displaying a text editor from primefaces (Showcase).
However, the text editor is not displayed. When I inspect it (F12 in chrome), I see multiple errors, the first one is:

core.js.xhtml:2 Uncaught ReferenceError: $ is not defined
at Object.resolveUserAgent (core.js.xhtml:2)
at Object.init (core.js.xhtml:2)
at core.js.xhtml:2

The others are Uncaught TypeError: Cannot read property 'Tag from Primefaces' of undefined.

I read those questions: 1 / 2, but I do have a <h:head>.
What am I missing?

My page (index.xhtml):

<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"  
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <h:outputStylesheet library="css" name="style.css"  />
    <h:outputScript library="js" name="script.js" />
</h:head>
<h:body>
    <p:textEditor value="#{textEditorController.text}" height="300" style="margin-bottom:10px"/>
    <p:commandButton value="Submit" action="#{textEditorController.submit}"/>
</h:body>
</h:html>

My web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <display-name>MusiglabelWEB</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
    <param-value>false</param-value>
  </context-param>
  <context-param>
    <param-name>facelets.SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
  </context-param>
</web-app>

I use muliple projects (WEB, JPA, EJB, EAR), if that matters.

Included Libraries in WEB Project:

Primefaces 6.1 (Downloaded here)

Bootsfaces 1.1.1 (Downloaded here)

what if you remove ``? And what JS do you see loaded in the browser console... Please do some investihation... — Kukeltje, May 07 '17 at 15:10
stack added. Removing my own script.js doesn't change it. Im not sure how to view the JS loaded, but if you mean those listed in the "Sources" tab: jquerry.js, jquerry-plugins.js, texteditor.js. components.js, core.js — Lahzey, May 07 '17 at 15:25
So, you build PrimeFaces from source? Or how exactly is it integrated in your project? — Jens Piegsa, May 07 '17 at 16:04
Check on the Network tab if those js files load successfully, jquery in particular. — Vsevolod Golovanov, May 07 '17 at 16:14
Ok, checked it. Following JS files are being loaded: jquery.js, jquery-plugins.js, components.js, script.js — Lahzey, May 07 '17 at 16:26
Integrated in eclipse: On the WEB Project I added the jars from the given downloads to the Java Build Path. — Lahzey, May 07 '17 at 16:28
Possible duplicate of [PrimeFaces and JQuery: resource ordering](http://stackoverflow.com/questions/42390734/primefaces-and-jquery-resource-ordering) — Vsevolod Golovanov, May 07 '17 at 18:31
Though that problem is supposed to be fixed in BootsFaces 1.1.0... Anyway, check if the problem goes away if you remove BootsFaces. If it does, then you should create an issue on their tracker. — Vsevolod Golovanov, May 07 '17 at 18:35
Thats true, forgot that. Not the cause of the problem, but thanks anyways. — Lahzey, May 08 '17 at 16:08

score 6 · Accepted Answer · answered May 07 '17 at 21:34

This is a bug in PrimeFaces, I registered it here. It manifests when a p:textEditor is the first of PrimeFaces components in the final view.

To work around the bug simply add some other component before it, you can make it not rendered, so it won't affect your page otherwise:

<p:inputText rendered="false" />
<p:textEditor />

score -2 · Answer 2 · answered Dec 28 '17 at 15:46

-2

I got the same problem. solved with importing both jquery and jquery ui like following

...
    <h:head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</h:head>
...

answered Dec 28 '17 at 15:46

Toumi

2,925
4
37
31

Bad solution (version wise) and error prone in other pages – Kukeltje Dec 28 '17 at 19:54

Uncaught ReferenceError: $ is not defined JSF Primefaces (h:head included)

2 Answers2