File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes JSF and the fly likes How to stop JSF to append extra text in ID attribute of th components Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "How to stop JSF to append extra text in ID attribute of th components" Watch "How to stop JSF to append extra text in ID attribute of th components" New topic
Author

How to stop JSF to append extra text in ID attribute of th components

Jaik Singh
Greenhorn

Joined: Sep 22, 2010
Posts: 20
Hello All,
I am trying to get the values of my page's components in javascript that is getting called on page load. But I am unable to get their values.

Please find the code snippet below.

<script type="text/javascript">
function init() {
alert("hi");
var temp = document.getElementById('test_userID');
// Note :- I also tried with "test_userID";
alert(temp);
}
</script>

<html>
<f:view>
<a4j:form>
<body onload="init()">
<f:loadBundle basename="bundle" var="var" />
<div align="center">
<h:messages />
<!--<rich:spacer width="1" height="50" />
-->
<rich:panel style="width:320px;">
<f:facet name="header">
<hutputText value="#{var.LOGIN_PAGE}"></hutputText>
</f:facet>
<h:panelGrid columns="2">
<hutputLabel value="#{var.LOGIN_NAME}" for="test_userID" />
<h:inputText id="test_userID" value="#{user.userID}"
required="true" requiredMessage="#{msg.USER_ID_REQ}" />

<hutputLabel for="test_password" value="#{var.LOGIN_PASSWORD}" />
<h:inputText id="test_password" value="#{user.password}"
required="true" requiredMessage="#{msg.PASSWORD_REQ}" />
<h:commandButton action="#{login.action}" value="#{var.SUBMIT}" />
</h:panelGrid>
</rich:panel>
</div>
</body>
</a4j:form>
</f:view>
</html>

This is not working and I am getting 'hi' and 'null' in alerts.

But if I change my JSF inputfield to <input type="text" id="test_userID" values="test"/>, it works fine.

In first case(with the JSF inputfield) , when I saw the 'Source Code' of my page, I noticed that instead of the 'test_userID' in ID attribute of my JSF inputfield it has some extra appended text too

i.e <input id="j_id_jsp_743478906_1:test_userID" type="text" name="j_id_jsp_743478906_1:test_userID" value="jaik" />

and in second case it is <input type="text" id="test_userID" value="test"/>


So, Could you please tell me is there any attribute which can stop this extra appended text into the ID of the components. I believe there is but I am not able to get that. Or any other way to get the values in javascript.

Thanks
Jaikrat Singh


Kumaravadivel Subramani
Ranch Hand

Joined: Jul 05, 2008
Posts: 166

I'm really don't know about the extra string added with inputField's id, but you can test the same code by onclick/other event. Because some times browser don't build the DOM hierarchy immediately and init() called by onLoad event, returns null.

No pain, No gain.
OCJP 1.6
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16012
    
  19

That extra information is not optional, it is mandatory.

JSF uses a concept known as naming containers, which says that an ID doesn't have to be 100% unique, it just has to be unique within its naming container. Naming containers may be nested, and 2 of the most popular naming containers are forms and dataTables, which, in turn maintain a sub-container for each row. So the generated ID in the HTML (where id's MUST all be unique) might be something like "j_12:j_37:0:fubar".

The "j_" names are automatically generated and not predictable. It's better to put IDs on the containers as well, both for error reporting and javascript convenience. So, if your form has the id "form1" and your dataTable has the id "tabl1", the generated ID would become "form1:tab1:0:fubar" (where 0 is the index of the first row in the table). You can reliably use this ID in JavaScript.

Note that while JavaScript, CSS, and other non-JSF id references have to be fully qualified as indicated above, most JSF tag references do not. For example "h:label for="fubar"".


Customer surveys are for companies who didn't pay proper attention to begin with.
Jaik Singh
Greenhorn

Joined: Sep 22, 2010
Posts: 20
Thanks a lot Tim for your suggestion.

I do not know that should I say this thing at this platform or not but in my previous organization there was one framework that was built on top of the Apache MyFaces and we were able to restrict that extra text in the ID attribute of the components at run time. Here I am using the RichFaces and did not find any such attribute.

So, Could you please suggest any solution in my case. How should I handle this scenario and how to get the value of the inputfields in javascript.

Thanks
Jaikrat Singh
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16012
    
  19


var ctlTemp = document.getElementById('form1:test_userID');
var temp = ctlTemp.value;


IF you put "id="form1"" on your form. You can use the "h:form" instead of "a4j:form". There's no longer a requirement to use a4j:form.

When in doubt, display the page source for the object in question, and use that ID EXACTLY as it appears in the HTML for your JavaScript. If you have automatically-generated ID component names, specify explicit IDs on the corresponding container object(s) so that they won't vary.

It didn't help you any that you were treating the HTML control object as though it was its value in your JavaScript. While a lot of HTML objects have default properties, it's better not to depend on them.
Jaik Singh
Greenhorn

Joined: Sep 22, 2010
Posts: 20
Hey Tim, It working in the 'Form1:<component_id>' way. Thanks.

But could you please tell me how did the ID of FORM stop that extra text to the IDs of the components.

Thanks
Jaikrat Singh
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16012
    
  19

It didn't stop it, it merely replaced it. The original "j_id_jsp_743478906_1" was just a default ID given to the form by JSF, since an ID MUST exist for the naming container, whether you give one explicitly or not.
Jaik Singh
Greenhorn

Joined: Sep 22, 2010
Posts: 20
Cleared. Thanks Tim for your consistent replies and suggestions.

Admin, this theard can be closed.

Thanks
Jaikrat Singh
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to stop JSF to append extra text in ID attribute of th components