So many time I am facing this conflict issue with Primefaces. I am using latest JQuery API 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 any solution exist for this?
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.
Just Follow up the below example,
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
..don't use $
Note : Instead of use $(....) sing. Use jQuery(...) like above snippet.