ftravers ftravers - 1 month ago 6
Javascript Question

How can I know the id of a JSF component so I can use in Javascript

Problem: Sometimes you will want to access a component from javascript with

getElementById
, but id's are generated dynamically in JSF, so you
need a method of getting an objects id. I answer below on how you can do this.




Original Question:
I want to use some code like below. How can I reference the inputText JSF component in my Javascript?

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>





Update: this post Client Identifiers in JSF2.0 discusses using a technique like:

<script type="javascript" >
function myFunc() {
alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
}
</script>

<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>


Suggesting that the attribute
id
on the
inputText
component
creates an object that can be accessed with EL using
#{myInptTxtId}
,
in the above example. The article goes on to state that JSF 2.0 adds
the zero-argument
getClientId()
method to the
UIComponent
class.
Thereby allowing the
#{myInptTxtId.clientId}
construct suggested
above to get the actual generated id of the component.

Though in my tests this doesn't work. Can anyone else confirm/deny.
The answers suggested below suffer from drawback that the above
technique doesn't. So it would be good to know if the above technique
actually works.

Answer

Answer: So this is the technique I'm happiest with. Doesn't require doing too much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the id of a component from anywhere on your page, not just from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access any other component, not just the one that launched it.

This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.

  1. Bind the component to a backing bean.

  2. Reference the bound component wherever you want.

So here is a sample of how that can be done.

Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.

*.xhtml page

<script>
  function myFunc() {
    var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")                 
    alert("The email address is: " + inputText.value );
  }
</script>

<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

BackBean.java

UIInput emailAddyInputText;

Make sure to create your getter/setter for this property too.

Comments