id attribute for <h:inputText> not generated when converted into HTML?

[Phil Lief]

Hi guys, I have a baffling problem (baffling to me anyway)...

I have created a JSP page that contains JavaScript and JavaServer Faces. There is a inputText box:

<h:inputText "styleClass="inputText" id="text1"/>

and a script function for getting the value:

function myFunc(){
  var start = document.getElementById("text1").value;

  alert("HERE");
  //some code here
}

When I call myFunc(), the alert does not happen. According to the Firefox Java error console:

TypeError:document.getElementById("text1") is null

and then when i check the page source, I get this:

<input value="" style='' class="inputText">	

that is obviously the <h:inputText> with id "text1", but the HTML code does not show any id.

Any ideas please? =(

[Phil Lief]

Ow...ok. Wasn't sure if it were a JSF or JSP problem lol...@_@

[Tim Holloway]

JavaScript needs the low-level (HTML) id of the target control, not the high-level (JSF) id that you specify on the JSF XML tag.

The difference between the two IDs is that JSF supports what are known as "naming containers" so that repetitive generation of HTML can occur (for example table rows) without violating the XML requirement that each generated item must have a unique ID.

Common naming containers include forms, dataTable and dataGrid. The low-level ID is generated by concatenating the container IDs with the simple (JSF) ID of the element, resulting in constructs like "myform:text1" or "myform:table2:0:phoneNumber", where the "0" is the (zero-based) row number.

If you don't put an ID on an element, JSF will generate one. For example, "form1:j_12345". The exact value of these synthetic IDs is unpredictable and changes without notice, so for best results, use explicit IDs.

[Phil Lief]

Yes, this is what I have researched as well...but I have assigned an explicit id to the <h:inputText> (id="text1").
Nothing I have researched so far has revealed why there is not id AT ALL...
P.s., I am using IBM RAD to develop the project with the offending page, and according to the page source when I run the page within RAD there IS indeed an id...but when I run the SAME page in a browser (Firefox) that same inputText has none...@_@

[Tim Holloway]

I trust that your inputText is contained within an h:form? Which means that the true ID as Javascript would require is something like "myform:text1".

As far as getting no ID on the generated HTML, that sounds like you might have other problems, since JSF's View renderer will automatically assign IDs, even if it has to make them up.