Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

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

 
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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">
<h:outputText value="#{var.LOGIN_PAGE}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="#{var.LOGIN_NAME}" for="test_userID" />
<h:inputText id="test_userID" value="#{user.userID}"
required="true" requiredMessage="#{msg.USER_ID_REQ}" />

<h:outputLabel 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


 
Ranch Hand
Posts: 171
Spring Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Saloon Keeper
Posts: 24867
174
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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"".
 
Jaik Singh
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 24867
174
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


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
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 24867
174
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Cleared. Thanks Tim for your consistent replies and suggestions.

Admin, this theard can be closed.

Thanks
Jaikrat Singh
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic