多个组件如何定位同一个"f:ajax render "目标？

我最近尝试使用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标签下-没有成功。

解决方案的想法?

要使AJAX技术正常工作，您必须使用h:head标记而不是HTML head标记。否则，内置的JS库将无法加载到页面中。

正如BalusC建议的那样，web浏览器的JS控制台在这种情况下很有帮助。应该出现"mojarra is not defined"的消息。

参见BalusC对commandLink/commandButton/ajax backing bean action/listener方法未被调用的问题的回答第7点

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

尝试添加execute="@form"属性到您的f:ajax标签

相关内容

最新更新

热门标签：