How to click on a p:commandButton using javascript

Question

There are many tag in my JSF page.I want to click a p:commandButton using javascript in one of the forms. But it doesn't work. When I debug it use chrome ,it prompt The p:commandButton can't be found , that is say $("#templetFile\:editButton") is null, why?

There is my code:

<h:form id="templetFile" style="height:100%">
<input type="button" value = "click me" onclick="testOnclick();"/>
<p:commandButton id="editButton" value="ceshi" styleClass="button"
 action="#{advancedQueryManager.editModAndClass()}" onclick="getValddd()"
 style="display:none">
 <p:ajax event="dialogReturn" update="templFile"
 listener="#{advancedQueryManager.onreturn()}" />
</p:commandButton>
  <script type="text/javascript" >
   function testOnclick() {
    var a =$("#templetFile\\:editButton");
    a.click();
   }
   function getValddd(){
    alert("Allready onclick!");
   }
  </script>
  </h:form>

And if I using this js code var b = document.getElementById('editButton'); I still can't get the p:commandButton element.Why?And how to get the p:commandButton using javascript?

Answer 1

Probably, jsf creates a new id for the button so document.getElementById('editButton') does not work. In order to solve this you may add an arbitrary style class to button like;

styleClass="button myButtonToClick" and javascript should be like this;

var x =document.getElementsByClassName("myButtonToClick");
x[0].click();