Question

I’m writing the ui:composition xhtml file to include in different pages using ui:include. It looks like there’s no way I can refer to the tags from javascript in this file using getElementById, as the tag ids might be prepended with the form id from the parent page. Is there a workaround?

Found this answer after I posted the question. It helped!
Acquire full prefix for a component clientId inside naming containers with JSF 2.0

Answer 1

You could do this:

var elem = document.querySelector( '[id$="-test"]' );

where test is the ID without the prefix, and - is the prefix separator.

The above code will select the element which “id” attribute ends with "-test" (e.g. <div id="form1-test">...</div>).

Live demo: http://jsfiddle.net/8kyb2/

Note that querySelector() paired with an attribute-ends-with selector performs slower than getElementById().