jQueryを使用してJSFコンポーネントを選択する方法

You should realize that jQuery works with the HTML DOM tree in the client side. jQuery doesn't work directly on JSF components as you've written in the JSF source code, but jQuery works directly with the HTML DOM tree which is generated by those JSF components. You need to open the page in webbrowser and rightclick and then View Source. You'll see that JSF prepends the ID of the generated HTML input elements with the IDs of all parent NamingContainer components (such as , , etc) with : as default separator character. So for example

    
    ...

生成されたHTMLに

<form id="foo" name="foo">
    <input type="checkbox" id="foo:bar" name="foo:bar" />
    ...

代わりに正確に要素を選択する必要があります。しかし、：は擬似セレクタを表すCSS識別子の特殊文字です。 jQueryでCSSセレクタを使用してIDの：要素を選択するには、バックスラッシュでエスケープするか、 [id = ...] 属性を使用する必要がありますセレクタを使用するか、古い getElementById（）：

var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));

XXX が増分番号を表すIDに自動生成された j_idXXX の部分がある場合は、特定のコンポーネントに固定IDを与える必要があります増分数は動的であり、ツリー内のコンポーネントの物理的位置に応じて変更される可能性があります。

<input type="..." class="someClassName" />

var $elements = $(".someClassName");

function someFunction(element) {
    var $element = $(element);
   //...
}