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

私はPrimeFacesとJSFコンポーネントでjQueryを実装しようとしていますが、正しく動作していません。 HTMLタグでも同じことをしようとしたとき、正しく動作しています。

以下は、jQueryで正しく動作するHTMLタグを使ったコードです:

<input type="checkbox" id="check2">
 

〜と

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

Here is the code 〜と PrimeFaces/JSF which doesn't work properly 〜と jQuery:


    

〜と

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});
35

4 答え

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を与える必要があります増分数は動的であり、ツリー内のコンポーネントの物理的位置に応じて変更される可能性があります。


また、クラス名を使用することもできます。


HTMLで終わる

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

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

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

これにより、より良い抽象化と再利用が可能になります。確かに、そのような要素はユニークではありません。 header、menu、content、footerのような主要レイアウト要素は本当にユニークですが、通常は NamingContainer にはまだありません。


再び別の方法として、HTML DOM要素自体を関数に渡すことができます:


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

参照:

72
追加された

また、jQueryの "Attribute Contains Selector"(URLは http:// apiです。 jquery.com/attribute-contains-selector/

たとえば、

  

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

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

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

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

要素の実際のhtmlタグを知るためには、firebugや開発ツールやソースを使って、実際のhtml要素(この場合はスピナーが入力に翻訳されたもの)を常に見ることができます...

ダニエル。

5
追加された

enter image description here look this will help you when i select experience=Yes my dialoguebox which id is dlg3 is popup.and if value is No it will not open

3
追加された

If you're using RichFaces you can check rich:jQuery comonent. It allows you to specify server side id for jQuery component. For example, you have component with specified server id, then you can apply any jQuery related stuff to in next way: .

詳細については、 doumentation をご覧ください。

それが役に立てば幸い。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript