Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors

by

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.

More Related Contents:

  1. How to select JSF components using jQuery?
  2. How to invoke animation when redirection in jsf?
  3. How to disable/enable JSF input field in JavaScript?
  4. How to use jQuery and jQuery plugins with PrimeFaces
  5. How to refer to a JSF component Id in jquery? [duplicate]
  6. TypeError: $(…).parents(…).size is not a function
  7. How to get the value of this.id in string? [duplicate]
  8. How to remove close button on the jQuery UI dialog?
  9. Rotating a Div Element in jQuery
  10. jQuery on window resize
  11. How can I change CSS display none or block property using jQuery?
  12. jQuery scroll to ID from different page
  13. jQuery dot in ID selector? [duplicate]
  14. check / uncheck checkbox using jquery? [duplicate]
  15. jQuery: get the file name selected from
  16. Display JSON Data in HTML Table
  17. jQuery change input text value
  18. disable past dates on datepicker
  19. How to render partial view in MVC5 via ajax call to a controller and return HTML
  20. grouping draggable objects with jquery-ui draggable
  21. jquery if div id has children
  22. jQuery calculate sum of values in all text fields
  23. problem when cloning jQuery UI datepicker
  24. What’s the difference between jquery.js and jquery.min.js?
  25. How can I check if a jQuery plugin is loaded?
  26. only shows first char of selected option
  27. How to make select2 work with jquery.validation plugin?
  28. How can I add jquery ui autocomplete to a dynamically created element?
  29. jQuery ajax upload with progress bar – no flash
  30. Filtering with checkboxes using jQuery

Leave a Comment