How to Use Jquery and Jquery Plugins With Primefaces

How to use jQuery and jQuery plugins with PrimeFaces

PrimeFaces already ships with jQuery bundled, yet you've downloaded and installed another one which would only conflict with PrimeFaces bundled jQuery. I'm sure that if you have paid a bit more attention and love to the webbrowser's builtin JavaScript console, you would have seen JS errors. And, if you checked the JSF-generated HTML output via rightclick, View Source in webbrowser, you would have seen another jquery.js file being included in HTML <head>.

You need to remove the following line:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

In case you have pages which do not necessarily use PrimeFaces components, and thus its jQuery wouldn't automatically be included, then you'd need to explicitly load its bundled jQuery by a proper <h:outputScript>.

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

Note that using <h:outputScript> does not end up in a duplicate script include on pages which actually use PrimeFaces components.

PrimeFaces and JQuery: resource ordering

I started an issue at BootsFaces-OSP (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/640) and found a workaround (described in the issue).
So now it works for me.

JQuery Conflicts with Primefaces?

I had the same problem as described in the question. That's why I came up with the following solution:

Include the primefaces built-in jQuery library (currently 1.4.1) as including an own jQuery library leads to CSS formatting problems. Adding the target="head" attribute allows for specifying the tag everywhere - e.g. when using templating you not always have access to the <head> tag:

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

The primefaces jQuery library is included by default in conflict mode. That means the $() shortcut cannot by used. To overcome this issue include the following line in a <script> or <h:outputScript> tag:

<h:outputScript target="head">
    // Add the $() function
    $ = jQuery;
    // Now you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

That's the best solution I could dig out so far, using primefaces 2.2.1.

Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors

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.

Jquery-UI issue with Primefaces

Solved Jquery UI Conflict issue with Primeface.

I have used 3 Jquery UI component,

1. Jquery Tab.

2. Jquery Draggable.

3. Jquery Calender.

while using this together I got this issue. Then I tried removing the component one by one and found that Jquery-Calendar is having some problem with Primeface-Jquery. So I removed the jquery calendar and used browser calendar with <input type='calendar' >

How to use jQuery with JSF 2.0

It works the same way.

ID Attributes

JSF appends the form's ID to all input fields inside the form. Hence, you need to be careful with your jQuery selectors. For example, suppose you have the following form:

<h:form id="myForm">
   <h:inputText id="myInput" />
</h:form>

Using jQuery, you have to refer to the input as: $("#myForm\\:myInput")

Frameworks

Some frameworks such as PrimeFaces, use components that may not work or may lost their skinning if you import your jQuery with:

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

Instead, you should use their built-in jQuery library by importing as:

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

This jQuery library is, however, included in conflict mode which means you cannot use $(). Hence, you may need this additional setting:

<h:outputScript target="head">
    $ = jQuery;
    // Then you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

How to solve a conflict with primefaces jquery

PrimeFaces as being a jQuery based JSF component library already ships with jQuery (and UI) out the box. PrimeFaces loads them all by itself once you use PrimeFaces components on the page. There's absolutely no point of manually loading another jQuery files along it. It'll only conflict in all colors as you experienced.

If you actually want to use jQuery/UI on a page which doesn't necessarily include PrimeFaces components and thus jQuery/UI doesn't necessarily get auto-included, then you need to manually include the PrimeFaces-bundled jQuery as follows:

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

Note: this won't end up in duplicate inclusions. JSF/PrimeFaces is capable of detecting that you already manually declared them and won't auto-include another one.

Or, if you actually want to upgrade PrimeFaces-bundled jQuery/UI to a newer version, then place those files on exactly the following location and file names:

WebContent
 |-- resources
 |    `-- primefaces
 |         `-- jquery
 |              |-- jquery.js          <-- newer jQuery version
 |              `-- jquery-plugins.js  <-- newer jQuery UI version
 :

When a JSF resource is found in WAR instead of JAR, then those in WAR will have higher loading precedence over those in JARs.

If you're still facing Uncaught TypeError errors, then make sure that the jQuery snippet you found in the Internet is compatible with the PrimeFaces-bundled jQuery version. PrimeFaces 5.0 ships with jQuery 1.11.0 and jQuery UI 1.10.3. Your snippet seems to be targeted at jQuery 1.4 and a lot has been changed in the path to jQuery 1.11. So is for example $.live() deprecated in 1.7 and removed in 1.9. See also the documentation.

What jQuery plugin is used by each Primefaces tag?

How can I find out what jQuery-UI plugin is used "under the hood" by a given Primefaces component?

@Vasan is right in his comment. It is a rather easy point to start.

I am learning Primefaces.

Great

It seems that each Primefaces component packages some or other jQuery plugin to do the user interface work.

This to a large extend is wrong. If you mean 'external to PrimeFaces' than this is only partially true. More components use PrimeFaces native code (yes, jquery-ui based) than external ones.

All javascript source is here. And in it you'll see a jquery folder that shows all plugins that come from jquery itself

Some components use external (not from PrimeFaces or from jquery-ui) client side components. The fileUpload does. In this folder you'll see the source of the external component with in the source references to which component it is.

/*
 * jQuery File Upload Plugin
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

In the same folder you'll also see the PrimeFaces 'wrapper'

It is often helpful to see the jQuery API documentation for this component as the Primefaces user guide is not always very detailed.

This has proven to be not true too in my almost 10 years experience working with PrimeFaces. First of all for most functionality there is not a real need for the low level internal workings. And the 'api' in the form of javascript functions is documented in the... well... documentation. But in the occasion you really need the low level details (rarely needed) or want to extend (sometimes needed), the source for me is part of the documentation. The PrimeFaces source is very cleanly written and will help a lot.

So my advice would be to just start using it, remember client-side all is just html, css, javascript and jquery(ui). And also remember the source is open and when you need the details, use the source. Don't start learning PrimeFaces by investigating these details.

How to Use Jquery and Jquery Plugins With Primefaces