Question

昨天我创建了一个非常简单的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页面（除法，乘法，减法）与上面相同，只有加法方法改变了正确的。

Managed Beans

MathMB

@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
}

MenuMB

@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;
    }
}

非常感谢任何提示！

Answer 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>
...

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

1 个答案: