如何在javascript中获取primefaces selectOneMenu组件

Question

I have a lookup with primefaces components like this;

<p:selectOneMenu id="selectOneMenuProjects"
    value="#{operationMessageBean.selectedModel.operationMessageProject}">
<f:selectItems id="selectItemProjects"
    value="#{selectItemBean.operationMessageProjectItemsAsObject}" />
</p:selectOneMenu>

I want to get "selectItems" component in my javascript method like this;

<script type="text/javascript">
  function getComponent() {
     var nodeName = document
       .getElementById('selectItemProjects').nodeName;
  }
</script>

BUT document.getElementById('selectItemProjects').nodeName; returns null

How can I get this "selectItems" component ?

Answer 1

Can you use jQuery?

If yes, the solution is easy, you just have to write something like this:

jQuery("[id*='selectOneMenuProjects']");

This must return the component and you can work with it. Note that I have used *= (contains) because JSF generates ids with self-identifiers before the id typed by you. If you can't use jQuery I think in something like this:

var i=0, div;
while(div= document.getElementsByTagName('div')[i++]){
    if(div.id.match(/selectOneMenuProjects/)){

    }
}

Or instead of div, whatever Primefaces generates as HTML code.

Hope it helps.

Answer 2

Be careful using the ID of any component in JSF, sometimes the ID name get nested with the parent name. Example: A selectOneMenu(ID=select12) inside a form, could have the name form:select12_input when rendered in your page.

I suggest you to watch the rendered name of your component using FireBug or Firefox/Chrome Inspector.

Solutions:

• If you want to know the .nodeName based on some action of selectOneMenu(onchange for example), you could this:

<p:selectOneMenu id="cmbPais" onchange="yourFunction(this); ......

Now in your JS:

   <script type="text/javascript">
        function yourFunction(a) {
           alert(a.nodeName);
        }
   </script>

• If you want just to get the nodeName in any function, inspect for the real name of your component... the code below works for me, but that depends on how your page was built.

   <script type="text/javascript"> function test() { var nodeName = document .getElementById('form:selectOneMenuProjects_input').nodeName; alert(nodeName); } </script>