JQuery Conflicts with Primefaces? [duplicate]

35

votes

I have included JQuery1.5 in the header of a JSF page. In that page there is a bunch of Primefaces components already coded. After I have included the Jquery.js in the header of the page, some primefaces components like <p:commandButton> loses their skin and <p:fileUpload> becomes looking like normal JSP <input type="file"> and losing its AJAX capability entirely.

Is there a way to use JQuery safely along with primefaces(without conflict)?

jsf-2primefacesjquery-1.5

I don't see why this question is marked with This question has been asked before. The linked question was asked 2 years after this question. – Lars Blumberg

52

votes

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.

43

votes

Why not use the jquery bundles with PrimeFaces?

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

PrimeFaces 2.2.1 has jQuery 1.4.4 and 3.0(in development) has 1.5.1.

7

votes

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $ . followings are some methods :

Write jQuery.noConflict(); before initialization of jQuery,see below

jQuery.noConflict();
$(document).ready(function(){
   // your jQuery code   
});

Create a different alias instead of jQuery to use in the rest of the script.

 var j = jQuery.noConflict();
 // Do something with jQuery
 j("div p").hide();

Change all instance of $ : Replace $ with jQuery in jQuery code block

 jQuery(document).ready(function){
       jQuery("div p").hide();
 })

Completely move jQuery to a new namespace in another object.

var dom = {};
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div p").hide();

Set scope of $ to local instead of global

    // Method 1
    jQuery(document).ready(function($){
         $("div").hide();
    });


    // Method 2
    (function($) {
      /* some code that uses $ */ 
    })(jQuery);

Note : this point comes with one drawback, you will not have access to your other library's $() method.

Original Reference

6

votes

My solution is add this code in default page:

<script type="text/javascript">var $j = jQuery.noConflict(true);</script>

After that i use jquery with:

$j

Thanks,

3

votes

jQuery has a 'noConflict' mode which allows it to play nicely side by side with other libraries. I haven't used Primefaces components, so I don't know for sure, but if you include jQuery in noconflict mode, your problems will likely go away.

3

votes

My experience:

I had the same problem and never got it working with both jquery libs. (I use jQuery instead of $ but never tried jQuery.noConflict()).

My solution was to use only the lib bundled with primefaces as described in Cagatays answer.

1

votes

to solve the conflict between Primefaces and jQuery avoid to import any external jQuery file, so to solve the problem import the jQuery files located in the primefaces jar

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

and in your jQuery code replace the $ with jQuery.

JQuery Conflicts with Primefaces? [duplicate]

7 Answers