JavaScript で JSF コンポーネント ID にアクセスするにはどうすればよいですか?

JavaScript で使用するための JSF コンポーネントの ID を知る

JavaScript では、getElementById 関数を利用してコンポーネントにアクセスできます。ただし、JSF はコンポーネント ID を動的に生成するため、コンポーネントの ID を取得することが重要です。この記事では、JavaScript で使用するコンポーネントの ID を取得する方法について説明します。

JavaScript コードを介して inputText コンポーネントにアクセスする次のシナリオを考えてみましょう:

<h:inputText>

function myFunc() {
  // Get the inputText component's contents
  alert("Your email address is: " + document.getElementById("emailAddress").value);
}

ドキュメントの使用生成された HTML DOM 要素を含む .getElementById

生成された HTML DOM 要素には次の構造がありますJSF で指定した ID とは異なります。生成されたコードを調べると、割り当てられた ID がわかります。たとえば、上記の例の inputText は次のようにレンダリングされる可能性があります。

<input type="text">

ここで、「j_id0:emailAddress」は、JSF によって生成された HTML DOM 内の実際の ID を表します。したがって、JavaScript でコンポーネントを正確に参照するには、指定された ID の代わりに生成された ID を使用してください。

JSF NamingContainer の固定 ID の設定

あるいは、JSF NamingContainer に固定 ID を割り当てることもできます。フォームなどのコンポーネントを使用して、JSF による ID の自動生成を防ぎます。例:

<h:form>

この設定では、フォーム ID は「formId」に固定され、inputText ID は「formId:emailAddress」になり、JavaScript で直接使用できるようになります。

バインディングで #{Component.clientId} を使用する

より高度なテクニックには、 #{component.clientId} 式とコンポーネント バインディング。例:

<h:inputText binding="#{emailAddress}" ... />

var input = document.getElementById('#{emailAddress.clientId}');

更新:

#{component.clientId} の直接使用

で言及されているブログ記事この問題は、EL 式が評価される現在のコンポーネントを参照する #{component} 参照に直接関係しています。コンポーネントの ID を取得するには、次の構文を使用します。

var input = document.getElementById('#{component.clientId}');

HTML DOM 要素を「this」として渡すリファレンス

別の方法は、生成された HTML DOM 要素を「this」として渡すことです。関数への参照により、コンポーネント内のコンポーネントのプロパティに直接アクセスできるようになります。 function.

<h:inputText onclick="show(this)" />

function show(input) {
  alert(input.value);
}

jQuery とイベント委任の使用

jQuery は、イベント委任とスタイル クラスを使用してコンポーネントを抽象化することで、さらに高度なオプションを提供します。

<h:inputText styleClass="someMarkerClass" />

$(document).on("click", ".someMarkerClass", function() {
  var $input = $(this);
  alert($input.val());
});

以上がJavaScript で JSF コンポーネント ID にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。