JQuery конфликтует с Primefaces? [дубликат]

этот вопрос уже есть ответ здесь:

Я включил JQuery1.5 в заголовке страницы JSF. На этой странице есть куча компонентов Primefaces, уже закодированных. После того, как я включил Jquery.js в заголовке страница, некоторые компоненты primefaces, такие как <p:commandButton> теряет кожу и <p:fileUpload> становится похожим на обычный JSP <input type="file"> и полностью теряет свои возможности AJAX.

есть ли способ безопасно использовать JQuery вместе с primefaces (без конфликта)?

34
jquery-1.5 jsf-2 primefaces

7 ответов

у меня была та же проблема, что и в вопросе. Вот почему я придумал следующее решение:

включить встроенную библиотеку jQuery primefaces (в настоящее время 1.4.1), поскольку включение собственной библиотеки jQuery приводит к проблемам форматирования CSS. Добавление target="head" атрибут позволяет указывать тег везде-например, при использовании шаблонов у вас не всегда есть доступ к <head> tag:

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

библиотека jQuery primefaces включена по умолчанию в режим конфликта. Это означает $() ярлык не может использоваться. Чтобы преодолеть эту проблему, включите следующую строку в <script> или <h:outputScript> tag:

<h:outputScript target="head">
    // Add the $() function
    $ = jQuery;
    // Now you can use it
    $(document).ready(function() {
        ...
    });
</h:outputScript>

это лучшее решение, которое я мог бы выкопать до сих пор, используя primefaces 2.2.1.

50

почему бы не использовать пакеты jquery с PrimeFaces?

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

PrimeFaces 2.2.1 имеет jQuery 1.4.4 и 3.0 (в разработке) имеет 1.5.1.

43

многие библиотеки JavaScript используют $ как имя функции или переменной, как и jQuery. В случае, если в jQuery, $ - это просто псевдоним для jQuery, поэтому все функции доступны без использования $ . ниже приведены некоторые методы :

  • написать jQuery.noConflict(); перед инициализацией jQuery см. ниже 

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

  • создайте другой псевдоним вместо jQuery для использования в остальная часть сценария. 

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

  • изменить все экземпляры $ : заменить $ С jQuery в блоке кода jQuery 

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

  • полностью переместите jQuery в новое пространство имен в другом объекте. 

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

  • установить рамки $ для локального вместо глобального

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


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

    Примечание : этот пункт приходит с одним недостатком, вы не будете иметь доступ к другой библиотеке $() метод.

Original Reference

6

мое решение-добавить этот код на странице по умолчанию:

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

после этого я использую jQuery с: 

$j

спасибо,

6

у jQuery есть 'noConflict ' режим, который позволяет ему играть красиво бок о бок с другими библиотеками. Я не использовал компоненты Primefaces, поэтому я не знаю точно, но если вы включите jQuery в режиме noconflict, ваши проблемы, скорее всего, исчезнут.

3

мой опыт:

у меня была такая же проблема, и я никогда не работал с обеими библиотеками jquery. (Я использую jQuery вместо $ но никогда не пробовал jQuery.noConflict()).

моим решением было использовать только lib в комплекте с primefaces, как описано в ответе Cagatays.

3

чтобы решить конфликт между Primefaces и jQuery, избегайте импорта любого внешнего файла jQuery, поэтому для решения проблемы импортируйте файлы jQuery, расположенные в банке primefaces 

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

и в вашем коде jQuery замените $ на jQuery.

1