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

Question

Yesterday I created a really simple JSF project to practice how to render a dynamic menu with Ajax request. 昨天，我创建了一个非常简单的JSF项目，以练习如何使用Ajax请求呈现动态菜单。 The addition method works pretty well, but in case I switch to another tab the result is not calculated and displayed in the page. 添加方法效果很好，但是如果我切换到另一个选项卡，则不会计算结果并将其显示在页面中。 I debugged the code for hours, but till yet I haven't found the root cause. 我调试了几个小时的代码，但直到现在我还没有找到根本原因。 Do you have any idea what the problem can be? 您知道问题可能是什么吗？

Web Pages 网页

index.xhtml: 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 另外的.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>

All other xhtml pages (division, multiplication, subtraction) are the same as above, only the addition method is changed with the proper one. 所有其他xhtml页面（除法，乘法，减法）与上述相同，只有加法更改为适当的加法。

Managed Beans 托管豆

MathMB 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 菜单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;
    }
}

Thanks a lot for any tips! 非常感谢您提供的任何提示！

Answer 1

You need to put the <f:ajax> tag inside the commandbuttons, not the other way round. 您需要将<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 个解决方案

解决方案1
-1 2015-07-16 08:11:15

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

问题描述

1 个解决方案

解决方案1 -1 2015-07-16 08:11:15

解决方案1
-1 2015-07-16 08:11:15