Question

我最近尝试使用AJAX编写一些简单的JSF页面。它基本上只是两个数字字段，然后在另一个

中加在一起

<head>
    <style>
        .standardText {
            font-family: Arial, serif;
        }
        .result {
            font-family: Arial, serif;
            border-top: solid blue 5px;
            text-align: right;
            width: 30%;
        }
        .input-field {
            font-family: Arial, serif;
            font-weight: bold;
            margin-left: 5px;
        }
    </style>
</head>
<h:body>
    <h2 class="input-field">Type in your arguments and the glorious machine will tell you the <br/>
    <span style="color: slateblue; text-overline: true;">TRUTH</span>!!</h2>
    <h:form>
        <p></p>
            <h:outputLabel value="Your first argument" for="arg"/>
            <h:inputText value="#{test.arg}" id="arg">
                <f:ajax event="change" render="result"/>
            </h:inputText>
        <p></p>
            <h:outputLabel value="Your second argument"
                           styleClass="standardText" for="arg2"/>
            <h:inputText value="#{test.arg2}" id="arg2">
                <f:ajax event="change" render="result"/>
            </h:inputText>

        <h:panelGroup layout="block">
            <h:outputText value="Your result is: #{test.result}" id="result"/>
        </h:panelGroup>
    </h:form>
</h:body>

bean就像页面一样简单：只有三个属性arg，arg2和result（结果在getter中计算）。

package com.jsf;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;

@Named("test")
@ViewScoped
public class Test implements Serializable {

private static final long serialVersionUID = 1L;

private Integer arg;

private Integer arg2;

private int result;

public int getResult() {
    result = arg + arg2;
    return result;
}

public Integer getArg() {
    return arg;
}

public void setArg(Integer arg) {
    this.arg = arg;
}

public Integer getArg2() {
    return arg2;
}

public void setArg2(Integer arg2) {
    this.arg2 = arg2;
}

}

运行facelet并填入值时，结果输出不会改变。

经过一段时间的调试后，我猜测两个组件不能拥有相同的render目标？

我尝试将h:form归为一个f:ajax标记 - 没有成功。

解决方案的想法？

Answer 1

要使AJAX技术正常运行，您不得使用HTML head标记，而应使用h:head标记。否则，无法将内置的JS库加载到页面中。

正如BalusC所说，在这种情况下，Web浏览器JS控制台很有用。应该出现“mojarra未定义”的消息。

见BalusC对问题commandLink/commandButton/ajax backing bean action/listener method not invoked

的回答第7点

Answer 2

结果可能已更新，但未提交输入值。

尝试将execute="@form"属性添加到f：ajax标记

多个组件如何针对相同的＆＃34; f：ajax渲染＆＃34;目标？

2 个答案: