JSF Komponenten in JavaScript identifizieren, oder wie kommt man an die clientID einer Komponente

Generelle Patentrezepte gibt es auch hier nicht, aber ich möchte verschiedene Anwendungsszenarien aufzeigen, die Ihnen vielleicht helfen können einige knifflige JSF JavaScript Problemchen zu lösen.

Die einfachste Art an eine Komponenten Id zu kommen ist sicherlich folgende:

1
2
3
<h:inputtext binding="#{fullName}" value="#{fullName}">
</h:inputtext>
#{fullName.clientId}

Somit kann man einfach auf die Id zugreifen und diese z.B. in JavaScripts verwenden.

Für JavaScript bietet sich JQuery an, mit JQuery kann man leicht ein Dom Objekt identifizieren:

1
2
3
$('#{fullName.clientId}'.replace(/:/g,"\\:"))
oder
$('[@id=#{fullName.clientId}]')

Das Problem im ersten fall ist, dass alle ‘:’ escaped werden müssen, darum die replace Funktion, im zweiten Fall ist das nicht notwendig, da über das id Attribut gesucht wird.

Allerdings kommt man so nicht immer zum Ziel und ich gehe oft darauf über, über Klassen zu referenzieren, vorallem dann wenn man über eine Komponente innerhalb einer ui:repeat referenzieren will, ist das oftmals kein Fehler:

1
2
<h:inputText id="value"styleClass="#{field.name} #{page.id}"
value="#{field.value}"></h:inputText>

Zugreifen kann man dann über:

1
$('.#{field.name}.#{page.id}')

Das Ganze ist hier natürlich nur Theorie. In der Praxis wir man den JavaScript-Code z.B. über ein ClientBehavior rendern.