実際のクライアント ID については HTML 出力を参照してください
正しいクライアント ID を見つけるには、生成された HTML 出力を調べる必要があります。ブラウザーでページを開き、右クリックして[ソースを表示]を実行します。対象の JSF コンポーネントの HTML 表現を見つけて、それid
をクライアント ID として取得します。現在の名前付けコンテナーに応じて、絶対的または相対的な方法で使用できます。次の章を参照してください。
注: 、 などの反復インデックスが含まれている場合:0:
(:1:
反復コンポーネント内にあるため)、特定の反復ラウンドの更新が常にサポートされているわけではないことに注意する必要があります。詳細については、回答の下部を参照してください。
コンポーネントを記憶NamingContainer
し、常に固定 ID を付与する
ajax プロセス/実行/更新/レンダリングによって参照したいコンポーネントが同じNamingContainer
親内にある場合は、独自の ID を参照するだけです。
<h:form id="form">
<p:commandLink update="result"> <!-- OK! -->
<h:panelGroup id="result" />
</h:form>
同じ 内にない場合NamingContainer
は、絶対クライアント ID を使用して参照する必要があります。絶対クライアント ID はNamingContainer
区切り文字 (デフォルトでは ) で始まります:
。
<h:form id="form">
<p:commandLink update="result"> <!-- FAIL! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- OK! -->
</h:form>
<h:panelGroup id="result" />
<h:form id="form">
<p:commandLink update=":result"> <!-- FAIL! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
<h:form id="form">
<p:commandLink update=":otherform:result"> <!-- OK! -->
</h:form>
<h:form id="otherform">
<h:panelGroup id="result" />
</h:form>
NamingContainer
コンポーネントは、たとえば<h:form>
、<h:dataTable>
、<p:tabView>
、<cc:implementation>
(したがって、すべての複合コンポーネント) などです。生成された HTML 出力を見ると、それらを簡単に認識できます。それらの ID は、すべての子コンポーネントの生成されたクライアント ID の先頭に追加されます。固定 ID がない場合、JSF は自動生成された ID をj_idXXX
形式で使用することに注意してください。固定IDを与えることで、それを絶対に避けるべきです. OmniFacesNoAutoGeneratedIdViewHandler
は、開発中にこれに役立つ場合があります。
問題の javadoc を見つけることがわかっている場合は、そこにインターフェイスUIComponent
が実装されているかどうかを確認することもできます。NamingContainer
たとえば、HtmlForm
(UIComponent
ビハインド<h:form>
タグ)は を実装していることを示していますNamingContainer
が、HtmlPanelGroup
(UIComponent
ビハインド<h:panelGroup>
タグ)はそれを示していないため、実装していませんNamingContainer
。ここにすべての標準コンポーネントの javadoc があり、ここに PrimeFaces の javadoc があります。
問題を解決する
したがって、あなたの場合:
<p:tabView id="tabs"><!-- This is a NamingContainer -->
<p:tab id="search"><!-- This is NOT a NamingContainer -->
<h:form id="insTable"><!-- This is a NamingContainer -->
<p:dialog id="dlg"><!-- This is NOT a NamingContainer -->
<h:panelGrid id="display">
の生成された HTML 出力は<h:panelGrid id="display">
次のようになります。
<table id="tabs:insTable:display">
id
それをクライアント ID として正確に取得し、次のように接頭辞を付け:
て使用する必要がありupdate
ます。
<p:commandLink update=":tabs:insTable:display">
include/tagfile/composite の外部参照
UIComponent#getNamingContainer()
このコマンド リンクがインクルード/タグファイル内にあり、ターゲットがその外にある場合、現在の名前付けコンテナーの名前付けコンテナーの親の ID を必ずしも知らない場合は、次のように動的に参照できます。
<p:commandLink update=":#{component.namingContainer.parent.namingContainer.clientId}:display">
または、このコマンド リンクが複合コンポーネント内にあり、ターゲットがその外にある場合:
<p:commandLink update=":#{cc.parent.namingContainer.clientId}:display">
または、コマンド リンクとターゲットの両方が同じ複合コンポーネント内にある場合:
<p:commandLink update=":#{cc.clientId}:display">
render / update 属性のテンプレートで親ネーミング コンテナーの ID を取得するも参照してください。
カバーの下でどのように機能しますか
これはすべて、javadocで「検索式」として指定されています。UIComponent#findComponent()
検索式は、識別子 ( の id プロパティと正確に一致するものUIComponent
)、または文字値によってリンクされた一連のそのような識別子のいずれかで構成されUINamingContainer#getSeparatorChar
ます。検索アルゴリズムは次のように動作する必要があります。最終結果は同じです:
UIComponent
次のいずれかの条件が満たされるとすぐに停止して、検索のベースとなる を
特定します。
- 検索式が区切り文字で始まる場合 (「絶対」検索式と呼ばれます)、ベースは
UIComponent
コンポーネント ツリーのルートになります。先頭の区切り文字は取り除かれ、検索式の残りの部分は、以下で説明する「相対」検索式として扱われます。
- それ以外の場合
UIComponent
は、これがNamingContainer
ベースとして機能します。
- それ以外の場合は、このコンポーネントの親を検索します。a
NamingContainer
が検出された場合、それがベースになります。
- それ以外の場合 (no
NamingContainer
が検出された場合)、ルートUIComponent
がベースになります。
- 検索式 (前のステップで変更された可能性があります) は、基本コンポーネントのスコープ内で一致する ID を持つコンポーネント (存在する場合) を見つけるために使用される「相対」検索式になりました。試合は次のように行われます。
- 検索式が単純な識別子の場合、この値は id プロパティと比較され、次にベースのファセットと子が再帰的に比較されます
UIComponent
(ただし、子孫NamingContainer
が見つかった場合、それ自体のファセットと子は検索されません)。
- 検索式に区切り文字で区切られた複数の識別子が含まれている場合、最初の識別子を使用して
NamingContainer
、前の箇条書きの規則に従って a を検索します。次に、このfindComponent()
メソッドNamingContainer
が呼び出され、残りの検索式が渡されます。
PrimeFaces も JSF 仕様に準拠していますが、RichFaces は「追加の例外」を使用していることに注意してください。
「reRender」は、UIComponent.findComponent()
アルゴリズムを使用して (いくつかの追加の例外があります)、コンポーネント ツリー内のコンポーネントを検索します。
これらの追加の例外はどこにも詳しく説明されていませんが、相対的なコンポーネント ID (つまり、 で始まらないもの:
) は、最も近い親のコンテキストで検索されるだけでなく、同じビュー内のNamingContainer
他のすべてのNamingContainer
コンポーネントでも検索されることが知られています (これは比較的ちなみに高価な仕事)。
絶対に使わないprependId="false"
それでもうまくいかない場合は、 を使用していないかどうかを確認してください<h:form prependId="false">
。これは、ajax の送信とレンダリングの処理中に失敗します。この関連する質問も参照してください: prependId="false" を使用した UIForm は <f:ajax render> を壊します。
反復コンポーネントの特定の反復ラウンドを参照する
<ui:repeat>
次の<h:dataTable>
ような反復コンポーネントで特定の反復項目を参照することは、長い間不可能でした。
<h:form id="form">
<ui:repeat id="list" value="#{['one','two','three']}" var="item">
<h:outputText id="item" value="#{item}" /><br/>
</ui:repeat>
<h:commandButton value="Update second item">
<f:ajax render=":form:list:1:item" />
</h:commandButton>
</h:form>
ただし、Mojarra 2.2.5<f:ajax>
からサポートが開始されました (単純に検証を停止したため、上記の例外に直面することはありません。後で別の拡張修正が計画されています)。
これは、現在の MyFaces 2.2.7 および PrimeFaces 5.2 バージョンではまだ機能しません。将来のバージョンでサポートされる可能性があります。それまでの間、あなたの最善の策は、反復コンポーネント自体を更新することです<ui:repeat>
。
PrimeFaces を使用する場合は、検索式またはセレクターを検討してください
PrimeFaces 検索式を使用すると、JSF コンポーネント ツリー検索式を介してコンポーネントを参照できます。JSF にはいくつかの組み込み機能があります。
@this
: 現在のコンポーネント
@form
: 親UIForm
@all
: ドキュメント全体
@none
: なし
PrimeFaces は、新しいキーワードと複合表現のサポートにより、これを強化しました。
@parent
: 親コンポーネント
@namingcontainer
: 親UINamingContainer
@widgetVar(name)
: 指定されたコンポーネントによって識別されるwidgetVar
これらのキーワードを 、 などの複合式に混在させることもでき@form:@parent
ます@this:@parent:@parent
。
PrimeFaces Selectors (PFS) as in を@(.someclass)
使用すると、jQuery CSS セレクター構文を介してコンポーネントを参照できます。たとえば、HTML 出力ですべての共通スタイル クラスを持つコンポーネントを参照します。これは、「大量の」コンポーネントを参照する必要がある場合に特に役立ちます。これは、ターゲット コンポーネントが HTML 出力にすべてのクライアント ID を持っていることのみを前提としています (固定か自動生成かは関係ありません)。update="@(.myClass)" のような PrimeFaces セレクターはどのように機能しますか?も参照してください。