How to solve a conflict with primefaces jquery

Question

Im developing a project with primefaces 5, one page uses a js file that needs jquery, but shows Uncaught TypeError: undefined is not a function, but when I cha

Answer 1

I had also like you problem. Make sure script declaration as below example. Don't use $(....) sing. Use jQuery(...). It is ok for me.

<h:head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
    <script type="text/javascript">
        jQuery(document).ready(function(jQuery){

            ..don't use $

        });
    </script>       
</h:head>

Multiple different versions of jQuery co-existing

Answer 2

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.

If you actually want to use jQuery/UI on a page which doesn't necessarily include PrimeFaces components and thus jQuery/UI doesn't necessarily get auto-included, then you need to manually include the PrimeFaces-bundled jQuery as follows:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

Note: this won't end up in duplicate inclusions. JSF/PrimeFaces is capable of detecting that you already manually declared them and won't auto-include another one.

Or, if you actually want to upgrade PrimeFaces-bundled jQuery/UI to a newer version, then place those files on exactly the following location and file names:

WebContent
 |-- resources
 |    `-- primefaces
 |         `-- jquery
 |              |-- jquery.js          <-- newer jQuery version
 |              `-- jquery-plugins.js  <-- newer jQuery UI version
 :

When a JSF resource is found in WAR instead of JAR, then those in WAR will have higher loading precedence over those in JARs.

If you're still facing Uncaught TypeError errors, then make sure that the jQuery snippet you found in the Internet is compatible with the PrimeFaces-bundled jQuery version. PrimeFaces 5.0 ships with jQuery 1.11.0 and jQuery UI 1.10.3. Your snippet seems to be targeted at jQuery 1.4 and a lot has been changed in the path to jQuery 1.11. So is for example $.live() deprecated in 1.7 and removed in 1.9. See also the documentation.