JSF ajax 事件在表单中不起作用答案

【问题标题】：JSF ajax event does not work in formJSF ajax 事件在表单中不起作用
【发布时间】：2015-07-16 07:59:39
【问题描述】：

昨天我创建了一个非常简单的 JSF 项目来练习如何使用 Ajax 请求呈现动态菜单。添加方法效果很好，但如果我切换到另一个选项卡，结果不会计算并显示在页面中。我调试了几个小时的代码，但直到现在我还没有找到根本原因。你知道问题可能是什么吗？

网页

index.xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Mathematics</title>
</h:head>
<h:body>
    <h:panelGroup id="menu">
        <h:form>
            <f:ajax render="page">
                <h:commandButton value="Addition" action="#{menuMB.setPage('addition')}"></h:commandButton>
                <h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}"></h:commandButton>
                <h:commandButton value="Multiplication" action="#{menuMB.setPage('multiplication')}"></h:commandButton>
                <h:commandButton value="Division" action="#{menuMB.setPage('division')}"></h:commandButton>
            </f:ajax>
        </h:form>
    </h:panelGroup>
    <h:panelGroup id="page">
        <ui:include src="/WEB-INF/includes/#{menuMB.page}.xhtml"/>
    </h:panelGroup>
</h:body>
</html>

addition.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://xmlns.jcp.org/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGroup id="header">
    <h1>Addition</h1>
</h:panelGroup>
<h:panelGroup id="content">
    <h:form id="addition">
        <h:outputLabel for="number1" value="Number1:"/>
        <h:inputText id="number1" value="#{mathMB.number1}">
            <f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
        </h:inputText>
        <h:outputLabel for="number2" value="Number2:"/>
        <h:inputText id="number2" value="#{mathMB.number2}">
            <f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
        </h:inputText>
        <h:outputLabel for="result" value="Result:"/>
        <h:outputText id="result" value="#{mathMB.result}"/>
    </h:form>
</h:panelGroup>

所有其他xhtml页面（除法、乘法、减法）同上，只是加法换了合适的。

托管 Bean

数学MB

@ManagedBean
@RequestScoped
public class MathMB {

    private Integer number1;
    private Integer number2;
    private Integer result;

    public void addition() {
        if (number1 == null || number2 == null) {
            return;
        }
        result = number1 + number2;
    }

    subtraction...
    multiplication...
    division...

    //getters + setters
}

菜单MB

@ManagedBean
@ViewScoped
public class MenuMB implements Serializable {

    private String page;

    @PostConstruct
    public void init() {
        page = "addition";
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }
}

非常感谢任何提示！

【问题讨论】：

如果包含又包含一个表单，这会失败。这是可以接受的重复吗？ stackoverflow.com/questions/7108668/…

标签： ajax forms jsf

【解决方案1】：

您需要将<f:ajax> 标签放在命令按钮内，而不是相反。

<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}">
    <f:ajax render="page"/>
</h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}">
    <f:ajax render="page"/>
</h:commandButton>
...

【讨论】：