如何仅在发生onclick/oncomplete/on ...事件而不是在页面加载时调用JSF支持bean方法 [英] How to call JSF backing bean method only when onclick/oncomplete/on... event occurs and not on page load

问题描述

我有两个图像按钮:

<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时，这两种方法都会立即被调用.同样，当我单击它时，这两种方法也会被调用.

However, the both methods are immediately invoked when the page loads with values 1 and 2. Also when I click it, the both methods are invoked.

如何真正实现仅在实际单击图像按钮时调用bean方法的所需功能?

How can I achieve the desired functionality of only calling the bean method when the image button is actually clicked?

推荐答案

此方法无效.您似乎在混淆/混淆服务器端"和客户端"的基本Web开发概念，并且误解了JSF和EL的作用.

This approach will not work. You seem to be confusing/mixing the basic web development concepts of the "server side" and "client side" and to be misunderstanding the role of JSF and EL.

JSF是一种服务器端语言，它根据HTTP请求在Web服务器上运行，并生成HTML/CSS/JS代码，该代码随HTTP响应返回.在生成HTML输出的过程中，所有${}和#{}形式的EL表达式都将在服务器端执行. JavaScript是一种客户端语言，可在网络浏览器上运行并在HTML DOM树上运行. HTML onclick属性应指定一个JavaScript函数，该函数将在特定HTML DOM事件的客户端执行.

JSF is a server side language which runs on the webserver upon a HTTP request and produces HTML/CSS/JS code which get returned with the HTTP response. All EL expressions in form of ${} and #{} will be executed in the server side during generating the HTML output. JavaScript is a client side language which runs on the webbrowser and works on the HTML DOM tree. The HTML onclick attribute should specify a JavaScript function which will be executed in the client side on the particular HTML DOM event.

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

In order to invoke a JSF managed bean method, you need the action or *listener attribute. JSF provides components to generate the desired HTML and specify the desired ajax actions which would change the server side state. An <input type="image"> can be generated using a <h:commandButton image>. A bean method can be invoked by the action attribute of that component. That component can be ajaxified by embedding the <f:ajax> tag.

因此，以下应为您做到这一点:

So, the following should do it for you:

<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?

See also:

• Differences between action and actionListener
• How to invoke a managed bean action method in on* attribute of a JSF component
• How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

这篇关于如何仅在发生onclick/oncomplete/on ...事件而不是在页面加载时调用JSF支持bean方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！