13

I'm using PrimeFaces 3.5 and JSF 2.0. I wanted to use a jQuery plugin, so I included jQuery in my webapp.

<h:head>
    <h:outputScript name="js/jquery.min.js" />
    <h:outputScript name="js/jquery-ui.js" />
</h:head>

However, when using PrimeFaces components, I get uncaught type errors like this:

Uncaught TypeError: Cannot read property 'length' of undefined

Uncaught TypeError: Object [object Object] has no method 'autocomplete'

Uncaught TypeError: Cannot read property 'keyCode' of undefined

Uncaught TypeError: this.jq.draggable is not a function

Uncaught TypeError: Cannot read property 'LinearAxisRenderer' of undefined

Uncaught TypeError: Object [object Object] has no method 'fileupload'

Uncaught TypeError: this.jqEl.datetimepicker is not a function

Etc.

How is this caused and how can I solve it?

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
galao
  • 1,281
  • 8
  • 26
  • 50
  • Did you added and tags to your web.xml? Like [here](http://stackoverflow.com/questions/8875818/how-to-use-primefaces-pfileupload-listener-method-is-never-invoked)? – Ömer Faruk Almalı Apr 23 '13 at 10:30
  • yes, there is no problem with the fileupload function. uploading files works like a charm, the only problem is it gives me a typeerror for jquery and this gives me problems with my other jquery functions. – galao Apr 23 '13 at 10:37
  • 1
    Just one more guess, maybe you are trying to include jquery library and it can conflict with PF's jquery. – Ömer Faruk Almalı Apr 23 '13 at 11:06
  • hi, yes i included a higher version of jquery.js because im currently using a library `tag-it` reference: https://github.com/aehlke/tag-it. because if i dont, ill get a `Uncaught TypeError: Object [object Object] has no method 'autocomplete' tag-it.js:294` – galao Apr 24 '13 at 06:22
  • Then you should try `$.noConflict(true);` like [here](http://stackoverflow.com/a/4214678/1659451) – Ömer Faruk Almalı Apr 24 '13 at 06:52
  • sorry, but i'm confuse on how to use this. currrently i'm not importing any jquery library and i'm having the `Uncaught TypeError: Object [object Object] has no method 'autocomplete' tag-it.js:294`, where would i add `$.noConflict(true)`? – galao Apr 24 '13 at 07:24
  • Conflict mode generally used for prevent conflictions between different versioned jQuery libraries. But to be able to do same for jQueryui library you should follow the answer that I shared. So include the ui library then try to implement noconflict mode like in the answer to be able to fix the conflict between your ui library and PrimeFace's built-in jquery library. – Ömer Faruk Almalı Apr 24 '13 at 07:33
  • or wait for the BalusC to solve it, I lack of experience working with more than one libs. – Ömer Faruk Almalı Apr 24 '13 at 07:40
  • i have updated my question, please take a look – galao Apr 24 '13 at 07:54

1 Answers1

29

PrimeFaces is a jQuery based JSF component library. It already ships with jQuery and jQuery UI out the box. It is not right to manually load another copy of jQuery/jQuery UI for some reason. Multiple different versioned jQuery files would only conflict with each other this way, because they do not necessarily use/share exactly the same variables/functions.

Get rid of all those manually loaded jQuery/UI files. This makes no sense.

If you did this because you need to utilize some jQuery/UI magic in some page which doesn't necessarily use any PrimeFaces components (and thus its bundled jQuery won't be auto-included and thus $() would be unavailable), then you can always manually explicitly include PrimeFaces-bundled jQuery in some master template as below:

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

(the target="head" is unnecessary if you specify them directly inside <h:head>)

If you absolutely need to supply your own version of jQuery, because the one bundled in PrimeFaces is outdated, then you have 2 options:

  • Let your webapp supply its own on exactly the same resource identifier (library/name) /resources/primefaces/jquery/jquery.js (don't change the path nor filename!). This one will then be picked instead of the PrimeFaces-bundled one.

  • Unpack primefaces.jar, replace /META-INF/resources/primefaces/jquery/jquery.js file with the newer version (don't change the path nor filename!), repack a new primefaces.jar.

(and don't forget to remove all those <h:outputScript> references to own copy)

Test however thorougly. Some PrimeFaces-specific functionality may break with the upgrade because of minor changes/bugfixes in the newer jQuery version as compared to the PrimeFaces-bundled one.

Above all, you should make absolutely sure that you do not provide multiple copies of jQuery/UI, or you will still face conflicts/clashes as currently. Using $.noConflict() as some people may suggest is absolutely not intented to be able to use multiple jQuery libraries together. It's intented to be able to use jQuery together with another JS library which coincidentally also uses $() as global function, such as Prototype. See also a.o. Jquery and prototype noconflict.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • hi, yes i included a higher version of jquery.js because im currently using a library `tag-it` reference: https://github.com/aehlke/tag-it. because if i dont, ill get a `Uncaught TypeError: Object [object Object] has no method 'autocomplete' tag-it.js:294` – galao Apr 24 '13 at 06:21
  • 5
    Again, you **should not** supply another copy of jQuery. Instead, upgrade/override the PrimeFaces-supplied one. – BalusC Apr 24 '13 at 11:24
  • My web.xml had a reference to an outdated jquery for param-name org.omnifaces.CDN_RESOURCE_HANDLER_URLS. Removing this did the trick. – nettie Dec 03 '19 at 21:01