Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Answer:</strong> So this is the technique I'm happiest with. Doesn't require doing <em>too</em> much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the <code>id</code> of a component from anywhere on your page, not <em>just</em> from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access <strong>any</strong> other component, not just the one that launched it.</p> <p>This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.</p> <ol> <li><p>Bind the component to a backing bean.</p></li> <li><p>Reference the bound component wherever you want.</p></li> </ol> <p>So here is a sample of how that can be done.</p> <p>Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.</p> <p>*.xhtml page</p> <pre><code>&lt;script&gt; function myFunc() { var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}") alert("The email address is: " + inputText.value ); } &lt;/script&gt; &lt;h:inputText binding="#{backBean.emailAddyInputText}"/&gt; &lt;h:commandButton onclick="myFunc()" action="results" value="Next"/&gt; </code></pre> <p>BackBean.java</p> <pre><code>UIInput emailAddyInputText; </code></pre> <p>Make sure to create your getter/setter for this property too.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload