如何仅在 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/memberButton.jpg" onclick="#{home.setRendered(2)}"/>
但是,当页面加载值为 1 和 2 时,这两种方法都会立即调用.此外,当我单击它时,这两种方法都会被调用.
如何实现仅在实际单击图像按钮时调用 bean 方法的所需功能?
这种方法行不通.您似乎混淆/混淆了服务器端"和客户端"的基本 Web 开发概念,并且误解了 JSF 和 EL 的作用.
JSF 是一种服务器端语言,它根据 HTTP 请求在 Web 服务器上运行并生成 HTML/CSS/JS 代码,这些代码与 HTTP 响应一起返回.${}
和 #{}
形式的所有 EL 表达式将在生成 HTML 输出期间在服务器端执行.JavaScript 是一种客户端语言,它运行在 web 浏览器上并在 HTML DOM 树上工作.HTML onclick 属性应指定一个 JavaScript 函数,该函数将在客户端针对特定 HTML DOM 事件执行.
为了调用 JSF 托管 bean 方法,您需要 action
或 *listener
属性.JSF 提供组件来生成所需的 HTML 并指定将更改服务器端状态的所需 ajax 操作.可以使用
生成 .bean 方法可以由该组件的
action
属性调用.该组件可以通过嵌入
标签进行ajax化.
所以,以下应该为您做:
<div class="sidebarOptions"><h:commandButton image="images/homeButton.jpg" action="#{home.setRendered(1)}"><f:ajax execute="@this" render=":sidebar"/></h:commandButton>
<div class="sidebarOptions"><h:commandButton image="images/memberButton.jpg" action="#{home.setRendered(2)}"><f:ajax execute="@this" render=":sidebar"/></h:commandButton>
</h:form><!-- 以下只是对您真正想要实现的目标的猜测.--><h:panelGroup id="sidebar" layout="block"><h:panelGroup 渲染=#{home.rendered eq 1}">家</h:panelGroup><h:panelGroup 渲染=#{home.rendered eq 2}">成员</h:panelGroup></h:panelGroup>
另见:
- action 和 actionListener 的区别
- 如何在 JSF 组件的 on* 属性中调用托管 bean 操作方法
- 如何使用原生 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean?
I have two image buttons:
<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>
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.
How can I achieve the desired functionality of only calling the bean method when the image button is actually clicked?
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 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.
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>
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屋!