JQuery Conflicts with Primefaces? [duplicate]

Question

I had the same problem as described in the question. That’s why I came up with the following solution:

Include the primefaces built-in jQuery library (currently 1.4.1) as including an own jQuery library leads to CSS formatting problems. Adding the target="head" attribute allows for specifying the tag everywhere – e.g. when using templating you not always have access to the <head> tag:

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

The primefaces jQuery library is included by default in conflict mode. That means the $() shortcut cannot by used. To overcome this issue include the following line in a <script> or <h:outputScript> tag:

<h:outputScript target="head">
    // Add the $() function
    $ = jQuery;
    // Now you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

That’s the best solution I could dig out so far, using primefaces 2.2.1.

Leave a Comment Cancel reply