如何使用javascript单击p:commandButton

Question

我的JSF页面中有很多标签。我想在其中一个表单中使用javascript单击p:commandButton。但它不起作用。当我调试它使用chrome时，它提示找不到p:commandButton，即$（"#templetFile\：editButton"）为空，为什么？

有我的代码：

<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>

如果我使用此js代码var b = document.getElementById（'editButton'）;我仍然无法获取 p：commandButton 元素。为什么？以及如何使用 javascript 获取 p：commandButton？

Answer 1

也许，jsf 为按钮创建了一个新 id，因此document.getElementById('editButton')不起作用。为了解决这个问题，你可以添加一个任意的样式类来像按钮一样;

styleClass="button myButtonToClick"和 JavaScript 应该是这样的;

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