webentwicklung-frage-antwort-db.com.de

Wie wähle ich JSF-Komponenten mit jQuery aus?

Ich versuche, jQuery mit PrimeFaces- und JSF-Komponenten zu implementieren, aber es funktioniert nicht richtig. Als ich versuchte, dasselbe mit HTML-Tags zu tun, funktionierte es ordnungsgemäß.

Hier ist der Code mit HTML-Tags, der mit jQuery ordnungsgemäß funktioniert:

<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" />

mit

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

Hier ist der Code mit PrimeFaces/JSF, der mit jQuery nicht richtig funktioniert:

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

mit

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

Sie sollten wissen, dass jQuery mit dem HTML-DOM-Baum auf der Clientseite funktioniert. jQuery funktioniert nicht direkt mit JSF-Komponenten, wie Sie es im JSF-Quellcode geschrieben haben, aber jQuery funktioniert direkt mit dem HTML-DOM-Baum, der generiert wird von diesen JSF-Komponenten. Sie müssen die Seite im Webbrowser öffnen und mit der rechten Maustaste klicken und dann Quelltext anzeigen. Sie werden feststellen, dass JSF der ID der generierten HTML-Eingabeelemente die IDs aller übergeordneten NamingContainer -Komponenten voranstellt (z. B. <h:form>, <h:dataTable>, etc) mit : als Standardtrennzeichen. Also zum Beispiel

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

wird im generierten HTML als enden

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

Sie müssen Elemente stattdessen anhand genau dieser ID auswählen. Das : Ist jedoch ein Sonderzeichen in CSS-Bezeichnern, die einen Pseudoselektor darstellen. Um ein Element mit einem : In der ID mithilfe von CSS-Selektoren in jQuery auszuwählen, müssen Sie es entweder durch einen umgekehrten Schrägstrich maskieren oder den Attributselektor [id=...] Verwenden oder einfach die alte Funktion getElementById():

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

Wenn Sie einen automatisch generierten j_idXXX - Teil in der ID sehen, in dem XXX eine inkrementelle Zahl darstellt, müssen Sie das angeben bestimmten Komponente eine feste ID, da die inkrementelle Nummer dynamisch ist und sich abhängig von der physischen Position der Komponente im Baum ändert.


Alternativ können Sie auch nur einen Klassennamen verwenden:

<x:someInputComponent styleClass="someClassName" />

was in HTML endet als

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

damit du es so bekommst

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

Dies ermöglicht eine bessere Abstraktion und Wiederverwendbarkeit. Sicherlich sind solche Elemente nicht einzigartig. Nur die Hauptlayoutelemente wie Kopfzeile, Menü, Inhalt und Fußzeile sind wirklich einzigartig, aber sie befinden sich wiederum normalerweise noch nicht in einem NamingContainer.


Als weitere Alternative können Sie das HTML-DOM-Element selbst an die Funktion übergeben:

<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
    var $element = $(element);
    // ...
}

Siehe auch:

83
BalusC

Sie können auch den jQuery "Attribute Contains Selector" verwenden (hier die URL http://api.jquery.com/attribute-contains-selector/ )

Zum Beispiel, wenn Sie eine haben

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

und Sie möchten etwas an seinem Objekt tun, mit dem Sie es auswählen können

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

und wenn Sie seinen Wert drucken möchten, können Sie dies tun

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

Um das echte HTML-Tag des Elements zu kennen, können Sie das echte HTML-Element (in diesem Fall wurde Spinner in Eingabe übersetzt) ​​immer mit Hilfe von Firebug- oder Entwicklertools oder Quelltext anzeigen.

Daniel.

6
Daniel

Wenn Sie RichFaces verwenden, können Sie rich:jQuery Komponente. Hier können Sie die serverseitige ID für die jQuery-Komponente angeben. Wenn Sie beispielsweise eine Komponente mit der angegebenen Server-ID haben, können Sie auf folgende Weise alle mit jQuery zusammenhängenden Elemente anwenden:

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

Weitere Informationen finden Sie unter Dokumentation .

Ich hoffe es hilft.

2
nndru