How to Avoid jQuery Conflicts When Using PrimeFaces?

jQuery and jQuery Plugins: Avoiding Conflicts with PrimeFaces

When integrating jQuery and its plugins into an existing PrimeFaces web application, users may encounter unexpected issues with PrimeFaces components losing their functionality and styling. The culprit lies in the presence of multiple jQuery instances.

PrimeFaces includes a bundled version of jQuery, which is used by its components. Adding another external jQuery script manually can conflict with PrimeFaces' bundled jQuery, leading to the malfunctions observed.

To resolve this conflict, it is crucial to remove the manually added jQuery script:

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

For pages that do not utilize PrimeFaces components and therefore do not automatically include its jQuery, an explicit reference to the bundled jQuery must be added using :

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

This approach ensures that only PrimeFaces' bundled jQuery is loaded, preventing conflicts.

For further insights, refer to the following resources:

• [Adding jQuery to PrimeFaces results in Uncaught TypeError over all place](https://forum.primefaces.org/viewtopic.php?f=3&t=56492)
• [How to solve a conflict with primefaces jquery](https://stackoverflow.com/questions/24453219/how-to-solve-a-conflict-with-primefaces-jquery)

The above is the detailed content of How to Avoid jQuery Conflicts When Using PrimeFaces?. For more information, please follow other related articles on the PHP Chinese website!