Question

我有两个图像按钮：

<div class="sidebarOptions">
    <input type="image" src="images/homeButton.jpg" onclick="#{home.setRendered(1)}"/>
</div>
<div class="sidebarOptions">
    <input type="image" src="images/memberButton.jpg" onclick="#{home.setRendered(2)}"/>
</div>

但是，当页面加载值为1和2时，会立即调用这两种方法。另外，当我单击它时，将调用这两种方法。

如何在实际点击图像按钮时实现仅调用bean方法的所需功能？

Answer 1

这种方法不起作用。您似乎混淆/混淆了“服务器端”和“客户端”的基本Web开发概念，并且误解了JSF和EL的角色。

JSF是一种服务器端语言，它在HTTP请求时在Web服务器上运行，并生成HTML / CSS / JS代码，并通过HTTP响应返回。在生成HTML输出期间，将在服务器端执行${}和#{}形式的所有EL表达式。 JavaScript是一种客户端语言，它在webbrowser上运行并在HTML DOM树上运行。 HTML onclick属性应指定一个JavaScript函数，该函数将在特定HTML DOM事件的客户端执行。

要调用JSF托管bean方法，您需要action或*listener属性。 JSF提供组件来生成所需的HTML并指定所需的ajax操作，这些操作将改变服务器端状态。可以使用<input type="image">生成<h:commandButton image>。可以通过该组件的action属性调用bean方法。可以通过嵌入<f:ajax>标记来激活该组件。

因此，以下内容应该为您完成：

<h:form>
  <div class="sidebarOptions">
    <h:commandButton image="images/homeButton.jpg" action="#{home.setRendered(1)}">
      <f:ajax execute="@this" render=":sidebar" />
    </h:commandButton>
  </div>
  <div class="sidebarOptions">
    <h:commandButton image="images/memberButton.jpg" action="#{home.setRendered(2)}">
      <f:ajax execute="@this" render=":sidebar" />
    </h:commandButton>
  </div>
</h:form>

<!-- The below is just a guess of what you're really trying to achieve. -->
<h:panelGroup id="sidebar" layout="block">
  <h:panelGroup rendered="#{home.rendered eq 1}">
    Home
  </h:panelGroup>
  <h:panelGroup rendered="#{home.rendered eq 2}">
    Member
  </h:panelGroup>
</h:panelGroup>

如何在onclick / oncomplete / on ...事件发生时调用JSF支持bean方法，而不是在页面加载时调用

1 个答案:

另见：