JQuery Conflicts with Primefaces?

Question

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

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, Jun 19 '17 at 20:57

Lars Blumberg · Accepted Answer · 2013-02-12T13:20:47.907

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.

In addition to Lars explanation above, Primefaces doesn't automatically include jQuery on pages that don't use Primefaces components even if the Primefaces namespace was defined in the tag, so you can either use the method explained by Lars above or change one of your components to use the Primefaces component implementation, say change to . — Babatunde Adeyemi, Apr 06 '13 at 15:13

score 43 · Answer 2 · edited Jan 24 '12 at 23:01

43

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.

edited Jan 24 '12 at 23:01

codeturner

993
1
8
20

answered Mar 28 '11 at 10:01

Cagatay Civici

6,406
1
29
34

4

As a side note, 2.2.1's jquery has noconflict enabled by default and 3.0's doesn't have noconflict on. – Cagatay Civici Mar 28 '11 at 11:09

xkeshav · Answer 3 · 2013-01-11T08:37:18.423

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

score 6 · Answer 4 · edited Feb 12 '18 at 14:29

6

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,

edited Feb 12 '18 at 14:29

Nuno_Coletiv

367
3
16

answered Jun 18 '14 at 16:57

Marin

1,010
1
10
37

score 3 · Answer 5 · answered Mar 28 '11 at 09:57

3

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.

answered Mar 28 '11 at 09:57

MightyE

2,679
18
18

score 3 · Answer 6 · answered Mar 28 '11 at 10:10

3

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.

answered Mar 28 '11 at 10:10

Matt Handy

29,855
2
89
112

The same holds for me. I can only use the primefaces built-in jQuery; when using my own jQuery lib the CSS styles will be corrupted. That means I can use only the jQuery() function instead of $(). – Lars Blumberg Apr 01 '11 at 07:01

score 1 · Answer 7 · answered Mar 04 '16 at 17:02

1

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.

answered Mar 04 '16 at 17:02

Hamza Toussi

108
10

Why not improve the 39 upvoted answer instead of creating an almost identical one? – Kukeltje Mar 04 '16 at 17:39

JQuery Conflicts with Primefaces?

7 Answers7

Linked