JSF commandButton 'onclick' 事件不持久答案

【问题标题】：JSF commandButton 'onclick' event not persistentJSF commandButton 'onclick' 事件不持久
【发布时间】：2012-02-07 20:21:55
【问题描述】：

我想要一个可点击的图像，它会在翻转/移出/点击时发生变化。不用说，我希望在“点击”之后页面不会重新加载。
我正在尝试使用 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}"  />

点击后，两者都会弹出警告框，但是，只有第二个会重新加载页面，而第一个不会。不知道我与它有什么关系，但是当我查看编译页面的源代码时，我看到第一个按钮的类型保持为“按钮”，但第二个变成了“图像”。

有什么建议吗？干杯，埃雷兹

【问题讨论】：

标签： jsf-2

【解决方案1】：

<h:commandButton>（和<h:commandLink>）的默认行为是提交<h:form>指定的父POST表单。

onclick 属性只允许开发人员在提交表单之前执行一些 JavaScript 代码。默认情况下，它不会阻止表单提交。如果您想阻止按钮的默认行为（提交表单），则需要在 onclick 中添加 return false;。

如果是<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']});
}

【讨论】：