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 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.
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.
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.
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,
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.
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.
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.
