web-dev-qa-db-ja.com

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

PrimeFacesおよびJSFコンポーネントを使用してjQueryを実装しようとしていますが、正しく機能していません。 HTMLタグで同じことをしようとすると、正しく動作します。

JQueryで適切に動作するHTMLタグを使用したコードは次のとおりです。

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

と

$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }
});

PrimeFaces/JSFを使用したコードは、jQueryで適切に動作しません。

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

と

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});
jqueryjsfjsf-2primefaces
40
Karthikeyan

JQueryはクライアント側のHTML DOMツリーと連携することを理解する必要があります。 jSFは、JSFソースコードで記述したようにJSFコンポーネント上で直接動作しませんが、jQueryはgeneratedであるHTML DOMツリーと直接動作しますそれらのJSFコンポーネントによって。 Webブラウザでページを開き、右クリックしてからソースを表示する必要があります。 JSFは、生成されたHTML入力要素のIDに、すべての親 NamingContainer コンポーネント（<h:form>、<h:dataTable>、など）:をデフォルトの区切り文字として使用します。例えば

<h:form id="foo">
    <p:selectManyCheckbox id="bar" />
    ...

として生成されたHTMLになります

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

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

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

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

別の方法として、クラス名を使用することもできます：

<x:someInputComponent styleClass="someClassName" />

最終的にHTMLになります

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

あなたがそれを得ることができるように

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

これにより、抽象化と再利用性が向上します。確かに、これらの種類の要素はユニークではありません。ヘッダー、メニュー、コンテンツ、フッターなどの主要なレイアウト要素のみが本当にユニークですが、通常はそれらはすでにNamingContainerに含まれていません。

もう一度別の選択肢として、HTML DOM要素自体を関数に渡すことができます。

<x:someComponent onclick="someFunction(this)" />

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

こちらもご覧ください：

83
BalusC

JQueryの「Attribute Contains Selector」を使用することもできます（URLは http://api.jquery.com/attribute-contains-selector/ です）

たとえば、

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/>

オブジェクトで何かをしたい場合は、それを選択できます

jQuery('input[id*="quantity"]')

その値を印刷したい場合は、これを行うことができます

alert(jQuery('input[id*="quantity"]').val());

要素の実際のhtmlタグを知るには、firebugまたは開発者ツールまたはソースの表示を使用して、実際のhtml要素（この場合はスピナーが入力に変換されています）を常に見ることができます...

ダニエル。

6
Daniel

RichFacesを使用している場合は、rich:jQueryコンポーネント。 jQueryコンポーネントのサーバー側IDを指定できます。たとえば、指定したサーバーIDのコンポーネントがあり、jQuery関連のものを次の方法で適用できます。

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

詳細については、 doumentation を確認してください。

それが役に立てば幸い。

2
nndru