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

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响应返回。格式为${}和的所有EL表达式#{}将在生成HTML输出期间在服务器端执行。JavaScript是一种客户端语言，可在网络浏览器上运行并在HTML DOM树上运行。HTML onclick属性应指定一个JavaScript函数，该函数将在特定HTML DOM事件上在客户端执行。

为了调用JSF托管bean方法，您需要actionor *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>

也可以看看：

• action和actionListener之间的区别
• 如何在JSF组件的on *属性中调用托管bean动作方法
• 如何使用本机JavaScript在HTML DOM事件上调用JSF管理的bean？