p:inputTextarea produce a javascript ReferenceError.

h3696978 · 25 Oct 2016, 13:41

Hello,

I am working with:

]PrimeFaces 6.0
javax.faces-2.2.13
apache-tomee-plume-7.0.1
JDK 1.8.0_101

When is use a p:inputTextarea i obtain the following javascript error:

Code: Select all

ReferenceError: PrimeFaces is not defined                                                        components.js.xhtml:1:1
Widget not available: InputTextarea                                                                 core.js.xhtml:1:3127

This error produces strange behavior with other components of page.

This error can be reproduced by the following code:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head></h:head>
    <h:body>
        <p:inputTextarea />
    </h:body>
</html>

If i change the PrimeFaces version to previous 5.3, this error doesnt occur.

Thanks,

smokeybandit · 25 Oct 2016, 18:27

First thing to always check for goofy errors like that is if you have conflicting versions of primefaces or jquery in your path

h3696978 · 26 Oct 2016, 12:15

Thanks for your replay.

I have continued looking for the reason of the Javascript error and i have found the following:

With a simple page using <p:inputText />:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head></h:head>
    <h:body>
        <p:inputText />
    </h:body>
</html>

I got the generated HTML:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/test/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/test/javax.faces.resource/components.css.xhtml?ln=primefaces&v=6.0" />
<script type="text/javascript" src="/test/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.locale='es_ES';PrimeFaces.settings.projectStage='Development';}</script>
</head>
<body>
<input id="j_idt7" name="j_idt7" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" />
<script id="j_idt7_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt7",{id:"j_idt7"});</script>
</body>
</html>

With a simple page using <p:inputTextarea />:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head></h:head>
    <h:body>
        <p:inputTextarea />
    </h:body>
</html>

I got the generated HTML:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2"><link type="text/css" rel="stylesheet" href="/test/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/test/javax.faces.resource/components.css.xhtml?ln=primefaces&v=6.0" />
<script type="text/javascript" src="/test/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.locale='es_ES';PrimeFaces.settings.projectStage='Development';}</script>
</head>
<body>
<textarea id="j_idt7" name="j_idt7" cols="20" rows="3" maxlength="2147483647" class="ui-inputfield ui-inputtextarea ui-widget ui-state-default ui-corner-all ui-inputtextarea-resizable"></textarea>
<script id="j_idt7_s" type="text/javascript">$(function(){PrimeFaces.cw("InputTextarea","widget_j_idt7",{id:"j_idt7",autoResize:true});});</script></body>
</html>

I see an obvious difference in the order of the generated code of <h:head> tag. Pay attention to these lines:

Code: Select all

<script type="text/javascript" src="/test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=6.0"></script>
<script type="text/javascript" src="/test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.0"></script>

I am not sure it is a goofy error.

Is there something in my configuration that produce this behavior, or is it an ISSUE?

In the example of <p:inputTextarea /> in your web the error does not occur, but i have the suspicion that is because you are using PrimerFaces 6.0.6, instead of PrimerFaces 6.0.

Thanks,

p:inputTextarea produce a javascript ReferenceError.

Who is online