JQuery kullanarak JSF bileşenleri nasıl seçilir?

JQuery'yi PrimeFaces ve JSF bileşenleriyle uygulamaya çalışıyorum, ancak düzgün çalışmıyor. HTML etiketleriyle aynı şeyi yapmaya çalıştığımda, düzgün çalışıyor.

İşte jQuery ile düzgün çalışan HTML etiketlerine sahip kod:

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

ile

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

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


    

ile

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

4 cevap

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


    
    ...

olarak oluşturulan HTML'de sona erecek

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

Öğeleri, bunun yerine tam olarak kimliğine göre seçmeniz gerekir. Bununla birlikte : , sahte bir seçiciyi temsil eden CSS tanımlayıcılarında özel bir karakterdir. JQuery'de CSS seçicilerini kullanarak kimliğin : ile bir öğe seçmek için, ters eğik çizgi ile veya [id = ...] özniteliğini kullanmak için onu kaçmak gerekir. seçici veya sadece eski getElementById() kullanın:

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

XXX öğesinin artan bir sayıyı temsil ettiği ID'de otomatik olarak oluşturulmuş bir j_idXXX parçası görürseniz, belirli bir bileşene sabit bir kimlik vermeniz gerekir gerekir . artan sayı dinamiktir ve bileşenin ağacın fiziksel konumuna bağlı olarak değişebilir.


Alternatif olarak, sadece bir sınıf adı da kullanabilirsiniz:


HTML olarak biter

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

böylece onu alabilirsiniz

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

Bu daha iyi soyutlama ve yeniden kullanılabilirlik sağlar. Elbette bu tür elemanlar benzersiz değildir. Yalnızca başlık, menü, içerik ve altbilgi gibi ana düzen öğeleri gerçekten benzersizdir, ancak bunlar genellikle NamingContainer içinde değildir.


Yine başka bir alternatif olarak, HTML DOM öğesinin kendisini yalnızca işleve iletebilirsiniz:


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

Ayrıca bakınız:

72
katma

Ayrıca jQuery "Nitelik İçerir Seçici" yi de kullanabilirsiniz (burada url http://api. jquery.com/attribute-contains-selector/ )

Örneğin,

  

ve nesnesinde bir şey yapmak istersen onu seçebilirsin

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

ve değerini yazdırmak istiyorsanız bunu yapabilirsiniz

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

Öğenin gerçek html etiketini bilmek için her zaman gerçek html öğesine bakabilirsin (bu durumda spinner girdiye çevrildi), ateşböceği veya başka bir deyişle geliştirici araçları veya ...

Daniel.

5
katma
Büyük bulmak! Daha da iyisi, "Seçici ile Ends Ends" seçeneğini kullanabilirsiniz: api.jquery.com/attribute-ends-with-selector PrimeFaces'de buna benzer: "@ (* [id $ = 'IDUsedInPrimeFaces'])" (Bu, id = "IDUsedInPrimeFaces" ile bir bileşen seçmenize izin verir) Müşteri kimliği, id = "form: IDUsedInPrimeFaces" gibi bir şey olduğunda.)
katma yazar Andrew, kaynak

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
katma

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: .

Daha fazla bilgi için lütfen sahtekarlığa bakın.

Umarım yardımcı olur.

1
katma