Menu
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)?
832
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
