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

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>