Wie greife ich in JavaScript auf JSF-Komponenten-IDs zu?

Kenntnis der ID einer JSF-Komponente zur Verwendung in Javascript

In Javascript kann die Funktion getElementById genutzt werden, um auf eine Komponente zuzugreifen. Da JSF jedoch Komponenten-IDs dynamisch generiert, ist die Ermittlung der Komponenten-ID von entscheidender Bedeutung. In diesem Artikel werden Möglichkeiten zum Abrufen der Komponenten-ID zur Verwendung in Javascript untersucht.

Stellen Sie sich das folgende Szenario vor, in dem wir über Javascript-Code auf die inputText-Komponente zugreifen möchten:

<h:inputText>

function myFunc() {
  // Get the inputText component's contents
  alert("Your email address is: " + document.getElementById("emailAddress").value);
}

Verwenden von Document .getElementById mit generiertem HTML-DOM-Element

Das generierte HTML-DOM-Element hat eine Struktur, die sich von der von Ihnen angegebenen ID unterscheidet JSF. Wenn Sie den generierten Code überprüfen, wird die zugewiesene ID angezeigt. Der Eingabetext im obigen Beispiel könnte beispielsweise wie folgt gerendert worden sein:

<input type="text">

wobei „j_id0:emailAddress“ die tatsächliche ID im von JSF generierten HTML-DOM darstellt. Um die Komponente in Javascript genau zu referenzieren, verwenden Sie daher die generierte ID anstelle der angegebenen ID.

Festlegen einer festen ID für JSF NamingContainer

Alternativ können Sie JSF NamingContainer eine feste ID zuweisen Komponenten wie Formulare, um zu verhindern, dass JSF automatisch IDs generiert. Zum Beispiel:

<h:form>

Mit diesem Setup wird die Formular-ID auf „formId“ festgelegt und die Eingabetext-ID lautet „formId:emailAddress“, die Sie jetzt direkt in Javascript verwenden können.

Verwenden von #{Component.clientId} mit Bindung

Eine fortgeschrittenere Technik beinhaltet die Verwendung von #{component.clientId} Ausdruck zusammen mit einer Komponentenbindung. Zum Beispiel:

<h:inputText binding="#{emailAddress}" ... />

var input = document.getElementById('#{emailAddress.clientId}');

Update:

Direkte Nutzung von #{component.clientId}

Der im erwähnte Blog-Artikel Das Problem bezieht sich direkt auf #{component}-Referenzen, die auf die aktuelle Komponente verweisen, in der der EL-Ausdruck ausgewertet wird. Um die ID der Komponente zu erhalten, verwenden Sie die folgende Syntax:

var input = document.getElementById('#{component.clientId}');

HTML-DOM-Element als „diese“-Referenz übergeben

Ein anderer Ansatz besteht darin, das generierte HTML-DOM-Element als „diese“-Referenz zu übergeben. Verweis auf eine Funktion, sodass Sie direkt auf die Eigenschaften der Komponente innerhalb der Funktion zugreifen können.

<h:inputText onclick="show(this)" />

function show(input) {
  alert(input.value);
}

Verwendung von jQuery und Event Delegation

jQuery bietet eine noch erweiterte Option, indem es die Ereignisdelegation und eine Stilklasse verwendet, um die Komponenten zu abstrahieren.

<h:inputText styleClass="someMarkerClass" />

$(document).on("click", ".someMarkerClass", function() {
  var $input = $(this);
  alert($input.val());
});

Das obige ist der detaillierte Inhalt vonWie greife ich in JavaScript auf JSF-Komponenten-IDs zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!