JSF commandButton'onclick'事件不会持久

Question

我想要一个可点击的图像，其中的滚动/滚出/点击发生变化。不用说，我想在'onclick'后页面不会重新加载。
我试图用h：image或h：commandButton来完成这两项工作，两者都无法按预期工作。 最讨厌的，这是这样的： 我在我的代码的bean，这个简单的函数：

public String getClick() 
{ 
    return "alert('abc')"; 
} 

，并在jsp文件，下面的代码：

<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td> 
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" /> 

用户点击后，既能提高警告框，但是，只有第二个重新加载页面，而第一个没有。不知道我与它有什么关系，但是当我查看编译页面的源代码时，我发现第一个按钮的类型保持“按钮”，但第二个按钮变成了“图像”。

有什么建议吗？ 欢呼声， 埃雷兹

Answer 1

的<h:commandButton>（和<h:commandLink>）的默认行为是提交其通过<h:form>指定父POST形式。

onclick属性只允许开发人员在表单提交之前执行某段JavaScript代码。它默认不阻止表单提交。如果你想阻止按钮的默认行为（提交表单），那么你需要添加return false;到onclick。

在<h:commandButton>情况下，该组件的属性type默认为submit，它会产生一个HTML <input type="submit">。当您将其更改为button时，它会变成一个“死”按钮，它基本上什么都不做，希望执行附加到它的任何JavaScript处理程序，并且它会生成一个HTML <input type="button">。当使用组件的image属性时，它将被转换为图像地图，允许您提交光标相对于图像的X，Y位置（但是，在您的情况下，您似乎只需要一个背景图像;如果您实际上应该使用CSS background-image代替），并且组件的type属性将被忽略并且它将生成一个HTML <input type="image">。

这全部清楚地记录在编码行为部分的tag documentation。

如果你唯一的要求是，从提交父窗体阻止<h:commandButton type="image">，那么你需要添加return false;到的onclick，如前说：

<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" /> 

另一种方法是结合使用type="button"用CSS背景图片（这样，你是不是滥用image属性）：

<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" /> 

与在由<h:outputStylesheet>加载CSS文件中的以下内容：

.emptyButton { 
    background-image: url(#{resource['empty.jpg']}); 
}