javascript - How to use jQuery and jQuery plugins with PrimeFaces

Question

Welcome To Ask or Share your Answers For Others

javascript - How to use jQuery and jQuery plugins with PrimeFaces

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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?

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-16T22:34:17+0000

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.

Categories

javascript - How to use jQuery and jQuery plugins with PrimeFaces

javascript - How to use jQuery and jQuery plugins with PrimeFaces

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

See also:

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags