As you probably know, JSF provides dynamic IDs for custom components. This can be an issue when you need to obtain the provided ID and use it for external tasks, such as accessing a component from JavaScript code. In this recipe, you will see how to use a dedicated library that will solve this issue by allowing us to get the dynamic ID for any of the other JSF components.
We have developed this recipe with NetBeans 6.8, JSF 2.0 and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library. In addition, we have used Proxy Id library, which works with JSF 2.0. You can download this distribution from http://www.jsftutorials.net/download/j4j/0.3/j4j.jar. The Proxy ID library is in the book code bundle, under the /JSF_libs/j4j JSF 2.0 folder.
Working with this library is a quick and simple task (we will demonstrate its use with a piece of JavaScript code). As a start add the corresponding taglib to your JSP page:
<%@taglib prefix="j4j" uri="http://javascript4jsf.dev.java.net/"%>
Continue by adding the j4j:idProxy component as a child of the JSF component that you want to reach:
<h:inputText id="bookID" value="JSF Cookbook"> <j4j:idProxy id="get_book_id" /> </h:inputText>
Provide a button that triggers the onClick mouse event. When the mouse event occurs, call a JavaScript function:
<h:commandButton id="submit" value="See book title and value!" onclick="JSBook();"/>
Finally, write the JavaScript function and exploit the getElementById function to get a reference to the idProxy component. Afterwards, use the title attribute to get the value of the dynamic ID you want.
<script type="text/javascript" language="javascript">
function JSBook(){
var js_book_title=document.getElementById("get_book_id").title;
var js_book_value = document.getElementById(js_book_title).value;
alert("JS Book [Title]: " + js_book_title);
alert("JS Book [Value]: " + js_book_value);
}
</script>
Putting everything together you will get the following code:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="j4j" uri="http://javascript4jsf.dev.java.net/"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<title>Use Proxy Id for a JSF Component</title>
<script type="text/javascript" language="javascript">
function JSBook(){
var js_book_title =
document.getElementById("get_book_id").title;
var js_book_value =
document.getElementById(js_book_title).value;
alert("JS Book [Title]: " + js_book_title);
alert("JS Book [Value]: " + js_book_value);
}
</script>
</head>
<body>
<h:form id="bookForm">
<h:inputText id="bookID" value="JSF Cookbook">
<j4j:idProxy id="get_book_id" />
</h:inputText>
<h:commandButton id="submit"
value="See book title and value!"
onclick="JSBook();"/>
</h:form>
</body>
</html>
</f:view>
The secret is that this library contains a custom component that allows you to get the dynamic ID for any of the other JSF components. This component can be "attached" to any JSF component by nesting it in the component that you want to reach. When you need the JSF component ID from JavaScript, you call the getElementById over the id of the nested j4j:idProxy component, and get the title attribute value.
The code bundled with this book contains a complete example of this recipe. The project can be opened with NetBeans 6.8 and it is named: Using_Proxy_Id_for_dynamic_IDs.
For more details about Proxy Id tags please check http://www.jsftutorials.net/proxyTag.html address.