can't get html td element using javascript in jsf application

Question

Hi,

<table>
  <tr><td id="myId">
    <input type="text">
  </td></tr></table>

and in JavaScript

 document.getElementById('myId');

This is not working in JSF application. However, the same is working if I save the generated HTML in my system and open it .

Any Help ?

Answer 1

When writing JavaScript code for a component based MVC framework which generates HTML, like JSF, you should not focus on the source code of the component based MVC framework, but on its generated HTML output.

If you can't tell this beforehand based on the source code, then you need to just open up the page in your favourite webbrowser and then rightclick the page and choose View Source. You'll see that the generated Client ID's are prepended by the ID's of the UINamingContainer components (like h:form, h:dataTable and f:subView). If you don't specify an ID for each of them, you will get an autogenerated ID like j_id_xxxx. To ease the work, you need to specify an ID for them. E.g.

<h:form id="form">

Also see this blog article for more information and hints. This blog article may also be useful to learn more about the wall between Java/JSP/JSF and JavaScript.

Answer 2

Firebug IYF.