How to use jQuery and jQuery plugins with PrimeFaces
I've a PrimeFaces web application. When I manually add jQuery and plugins like below,
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/onebyone/jquery.onebyone.js"></script>
<script type="text/javascript" src="js/onebyone/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-5.5.0.js"></script>
then PrimeFaces components loose their functionality and some of their styles. For example, <p:dialog> don't show up, <p:accordionPanel> doesn't slide, <p:panelGrid> loses padding, etcetera.
How is this caused and how can I solve it?
Answer
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.