JQuery Conflicts with Primefaces?
jquery-1.5, jsf-2, primefaces
Solution
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.
Problem
I have included JQuery1.5 in the header of a JSF page. In that page there is a bunch of Primefaces components already coded. After I have included the `Jquery.js` in the header of the page, some primefaces components like `<p:commandButton>` loses their skin and `<p:fileUpload>` becomes looking like normal JSP `<input type="file">` and losing its AJAX capability entirely. Is there a way to use JQuery safely along with primefaces(without conflict)?