title: Accessing JSF nested composite component elements in JavaScript
body: <p>I am trying to DRY up popup windows in my JSF 2 project using composite components.</p>
  
  <p>This code base uses Icefaces 3.3.0 (with their 1.8.2 compatibility layer for historical reasons), Mojarra 2.2.7, and Glassfish 4.1.</p>
  
  <p>I have input.xhtml which provides a text input and uses a 2-button popup (ok/cancel), which in turn builds on the basic popup.</p>
  
  <p>input.xhtml:</p>
  
  <pre><code>&lt;composite:interface&gt;
      &lt;!-- ... --&gt;
      &lt;composite:editableValueHolder name="forInput" targets="theInput"/&gt;
  &lt;/composite:interface&gt;
  &lt;composite:implementation&gt;
      &lt;my:popup2Buttons&gt;
          &lt;ice:inputText id="theInput" value="..."/&gt;
          &lt;script&gt;setInputFocus("#{cc.clientId}:theInput");&lt;/script&gt;
      &lt;/my:popup2Buttons&gt;
  &lt;/composite:implementation&gt;         
  </code></pre>
  
  <p>popup2buttons.xhtml:</p>
  
  <pre><code>&lt;composite:interface&gt;
      &lt;!-- ... --&gt;
  &lt;/composite:interface&gt;
  &lt;composite:implementation&gt;
      &lt;my:popup&gt;
          &lt;composite:insertChildren/&gt;
          &lt;ice:commandButton id="OkButton"
               value="Ok"
               actionListener="..."/&gt;
          &lt;ice:commandButton id="CancelButton"
                value="Cancel"
                actionListener="..."/&gt;
      &lt;/my:popup&gt;                    
  &lt;/composite:implementation&gt;
  </code></pre>
  
  <p>popup.xhtml:</p>
  
  <pre><code>&lt;composite:interface&gt;
      &lt;!-- ... --&gt;
  &lt;/composite:interface&gt;
  &lt;composite:implementation&gt;
      &lt;script&gt;
      function setInputFocus(id) {
          document.getElementById(id).focus();
      }
      &lt;/script&gt;
  
      &lt;ice:panelPopup&gt;
          &lt;f:facet name="body"&gt;
              &lt;h:panelGroup&gt;
                  &lt;composite:insertChildren/&gt;
              &lt;/h:panelGroup&gt;
          &lt;/f:facet&gt;
      &lt;/ice:panelPopup&gt;
  &lt;/composite:implementation&gt;
  </code></pre>
  
  <p>The popup works mostly as expected, i.e., I can enter something, the ok and cancel buttons work, and validation works as well.</p>
  
  <p>What does not work is my JavaScript code that tries to focus the input when the popup opens.</p>
  
  <p>When I look at the page in Firebug, I see that the input's ID is <code>MyForm:j_idt63:j_idt64:j_idt67:theInput</code>, but the JavaScript code tries to focus an element with the ID <code>MyForm:j_idt63:theInput</code>.</p>
  
  <p>Why is <code>#{cc.clientId}</code> in <code>input.xhtml</code> not the correct ID that the input ends up getting later? What do I need to do to make this work?</p>
  
  <p>I've seen <a href="https://stackoverflow.com/questions/12124727/retrieving-other-components-client-id-in-jsf-2-0">BalusC's hint on adding a binding</a> but I don't want a binding so that the composite component can be independent of any backing beans.</p>
  
  <p>Is there something else I am missing here?</p>