JQuery Conflicts with Primefaces? [duplicate]

2019-01-04 18:57发布

站内问答 / 前端开发
2038 7 2

This question already has an answer here:

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

7条回答
来，给爷笑一个
2楼-- · 2019-01-04 19:44

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.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-01-04 19:48

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.

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
4楼-- · 2019-01-04 19:55

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.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-01-04 19:56

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,

查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2019-01-04 19:59

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

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2019-01-04 20:01

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)