CODEWITHSUNDEEP
javascriptjsfprimefacesslider
roel
roel

Reputation: 2003

<p:slider> causes JS error "TypeError: h is undefined"

I have a <p:inputText> containing a price value with two fraction digits (e.g. 1,23 in Germany or 1.23 in US). The formatting of the number can easily be done using the <f:convertNumber>.

<p:inputText value="#{bean.price}">
    <f:convertNumber groupingUsed="#{false}" maxFractionDigits="2" minFractionDigits="2" />
</p:inputText>

But this does not work together with the <p:slider> component. Same thing without fractions but with grouped values like 20.000.000. Does anyone know how to get this running?

<p:inputText id="txt1" value="#{quoteFinance.kms}">
    <f:convertNumber maxFractionDigits="0" />
</p:inputText>  
<p:slider for="txt1" />

When sliding the slider, I get a javascript error: TypeError: h is undefined

I've asked the same question on PrimeFaces forum, but no answer. http://forum.primefaces.org/viewtopic.php?f=3&t=14401&p=107517#p107517

Upvotes: 1

Views: 3113

Answers (1)

BalusC
BalusC

Reputation: 1108587

TypeError: h is undefined

Those kind of JS/jQuery errors are typically caused by having duplicate different versioned jquery.js files loaded by the webapp. PrimeFaces as being a jQuery-based JSF component library already automatically loads a jquery.js file by itself. This problem suggests that you're for some reason manually loading another jquery.js file yourself via <script>/<h:outputScript>. If you remove it, then this error should disappear.

You do not need to supply your own copy of jquery.js. If you however happen to have a page wherein you'd like to use some jQuery, but the page itself doesn't contain any PrimeFaces component and thus doesn't necessarily auto-include the PrimeFaces-bundled jquery.js, then you can always explicitly include it yourself straight from PrimeFaces library by simply adding the following line:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

Note: the target="head" can be omitted when it's already inside the <h:head>. Otherwise, e.g. when inside <h:body> or <ui:define> of a template client, it will be automatically relocated to head. Another note: you can safely use this line in a page which actually auto-includes PrimeFaces-bundled jquery.js. This line won't cause a duplicate inclusion of jquery.js. So you can safely put this line in some master template.

Upvotes: 3

Related Questions