web-dev-qa-db-ja.com

PrimeFacesを使用してjQueryを手動で追加/ロードすると、UncaughtTypeErrorsが発生します

PrimeFaces3.5とJSF2.0を使用しています。 jQueryプラグインを使用したかったので、WebアプリにjQueryを含めました。

<h:head>
    <h:outputScript name="js/jquery.min.js" />
    <h:outputScript name="js/jquery-ui.js" />
</h:head>

ただし、PrimeFacesコンポーネントを使用すると、次のようなキャッチされないタイプエラーが発生します。

Uncaught TypeError：未定義のプロパティ 'length'を読み取れません

Uncaught TypeError：Object [objectObject]にはメソッド 'autocomplete'がありません

Uncaught TypeError：未定義のプロパティ 'keyCode'を読み取れません

Uncaught TypeError：this.jq.draggableは関数ではありません

Uncaught TypeError：未定義のプロパティ 'LinearAxisRenderer'を読み取れません

Uncaught TypeError：オブジェクト[オブジェクトオブジェクト]にメソッド 'fileupload'がありません

キャッチされていないTypeError：this.jqEl.datetimepickerは関数ではありません

等。

これはどのように発生し、どうすれば解決できますか？

jqueryjsfprimefacestypeerror
12
galao

PrimeFacesは、jQueryベースのJSFコンポーネントライブラリです。 alreadyは、jQueryおよびjQueryUIに同梱されています。何らかの理由で、jQuery/jQueryUIの別のコピーを手動でロードすることは正しくありません。複数の異なるバージョンのjQueryファイルは、必ずしもまったく同じ変数/関数を使用/共有するとは限らないため、この方法でのみ互いに​​競合します。

手動でロードされたjQuery/UIファイルをすべて削除します。これは意味がありません。

PrimeFacesコンポーネントを必ずしも使用しないページでjQuery/UIマジックを利用する必要があるためにこれを行った場合（したがって、バンドルされたjQueryは自動的に含まれず、したがって$()は使用不可）の場合、以下のように、PrimeFacesにバンドルされたjQueryをマスターテンプレートに手動で明示的に含めることができます。

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

（_target="head"_内で直接指定する場合は_<h:head>_は不要です）

PrimeFacesにバンドルされているものが古くなっているために、どうしても独自のバージョンのjQueryを提供する必要がある場合は、次の2つのオプションがあります。

  • Webアプリがまったく同じリソース識別子（ライブラリ/名前）_/resources/primefaces/jquery/jquery.js_で独自のものを提供するようにします（パスやファイル名を変更しないでください！）。 PrimeFacesにバンドルされているものの代わりにこれが選択されます。

  • _primefaces.jar_を解凍し、_/META-INF/resources/primefaces/jquery/jquery.js_ファイルを新しいバージョンに置き換え（パスやファイル名を変更しないでください！）、新しい_primefaces.jar_を再パックします。

（そして、自分のコピーへの_<h:outputScript>_参照をすべて削除することを忘れないでください）

しかし徹底的にテストしてください。 PrimeFacesにバンドルされているものと比較して、新しいjQueryバージョンではマイナーな変更/バグ修正が行われているため、一部のPrimeFaces固有の機能がアップグレードで機能しなくなる可能性があります。

何よりも、jQuery/UIの複数のコピーを提供しないしないことを絶対に確認する必要があります。そうしないと、現在のように競合/衝突が発生します。一部の人々が示唆するように$.noConflict()を使用することは、複数のjQueryライブラリを一緒に使用できるようにすることをまったく意図していません。 jQueryを、Prototypeなどのグローバル関数として偶然にも$()を使用する別のJSライブラリと一緒に使用できるようにすることを目的としています。 a.oも参照してください。 jqueryとプロトタイプnoconflict 。

25
BalusC