web-dev-qa-db-ja.com

JQueryはPrimefacesと競合しますか？

JSFページのヘッダーにJQuery1.5を含めました。そのページには、すでにコーディングされた多くのPrimefacesコンポーネントがあります。ページのヘッダーにJquery.jsを含めると、<p:commandButton>などの一部のPrimefacesコンポーネントのスキンが失われ、<p:fileUpload>が通常のJSP <input type="file">のように見えてAJAX機能全体。

Jfaceをプライムフェースと一緒に安全に（競合なしで）使用する方法はありますか？

jsf-2primefacesjquery-1.5
34
Selvin

質問で説明したのと同じ問題がありました。だからこそ、私は次の解決策を思いつきました。

Primefaces組み込みのjQueryライブラリー（現在1.4.1）を含めます。独自のjQueryライブラリーを含めるとCSSのフォーマットの問題が発生するためです。 _target="head"_属性を追加すると、どこでもタグを指定できます。テンプレートを使用する場合、常に_<head>_タグにアクセスできるとは限りません。

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

Primefaces jQueryライブラリーは、デフォルトで競合モードに含まれています。つまり、$()ショートカットは使用できません。この問題を解決するには、_<script>_または_<h:outputScript>_タグに次の行を含めます。

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

これが、primefaces 2.2.1を使用して、これまで掘り下げた最良のソリューションです。

50
Lars Blumberg

PrimeQueryでjqueryバンドルを使用しないのはなぜですか？

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

PrimeFaces 2.2.1にはjQuery 1.4.4があり、3.0（開発中）には1.5.1があります。

43
Cagatay Civici

多くのJavaScriptライブラリは、jQueryと同様に、関数名または変数名として$を使用します。 jQueryの場合、$はjQueryのエイリアスなので、すべて機能は$を使用せずに利用可能です。以下はいくつかの方法です：

  • JQueryの初期化の前にjQuery.noConflict();を記述します。以下を参照してください

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

    注：この点には1つの欠点があり、他のライブラリの$（）メソッド。

Original Reference

7
diEcho

私の解決策は、このコードをデフォルトページに追加することです。

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

その後、jqueryを以下で使用します。

$j

おかげで、

6
Marin

私の経験：

私は同じ問題を抱えていて、両方のjqueryライブラリで動作することはありませんでした。 （$_の代わりにjQueryを使用しますが、jQuery.noConflict()を試したことはありません）。

私の解決策は、Cagataysの回答で説明されているように、primefacesにバンドルされたlibのみを使用することでした。

3
Matt Handy

jQueryには「 noConflict 」モードがあり、他のライブラリとうまく共存できます。 Primefacesコンポーネントを使用したことがないので、確かなことはわかりませんが、jQueryをnoconflictモードに含めると、問題はなくなるでしょう。

3
MightyE

primefacesとjQueryの競合を解決するには、外部jQueryファイルをインポートしないようにします。したがって、問題を解決するには、primefaces jarにあるjQueryファイルをインポートします。

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

jQueryコードで$をjQueryに置き換えます。

1
Hamza Toussi