<f:ajax 事件> 不适用于 <ui:composition template="">答案

【问题标题】：<f:ajax event> not working with <ui:composition template=""><f:ajax 事件> 不适用于 <ui:composition template="">
【发布时间】：2013-04-01 03:36:52
【问题描述】：

我有一个奇怪的问题，我不知道主要原因，我有这些登录页面，它使用<f:ajax event=""> 来验证用户名和密码：

<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head></h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
    validator="#{validateBean.validateName}">
    <f:ajax event="blur" render="nameError" />
</h:inputText>
            <h:message for="name" id="nameError" style="color:red" />

Password:
<h:inputText id="password" value="#{validateBean.password}"
    validator="#{validateBean.validatePassword}">
    <f:ajax event="blur" render="passwordError" />
</h:inputText>
        <h:message for="password" id="passwordError" style="color:red" />
                <h:commandButton value="Login" action="# {validateBean.login}" />

</h:panelGrid>

这些 JSF 可以正常工作，但是当我将上述相同的组件放在 <ui:composition template=""> 下以便将这些页面与模板一起使用时，就会出现问题

<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/WEB-INF/Templates/BasicTemplate.xhtml">
<ui:define name="content">
    <center>
        <h:form>
            <h:panelGrid columns="3">
Name:
<h:inputText id="name" value="#{validateBean.name}"
                    validator="#{validateBean.validateName}">
                    <f:ajax event="blur" render="nameError" />
                </h:inputText>
                <h:message for="name" id="nameError"  style="color:red" />
Password:
<h:inputText id="password" value="#{validateBean.password}"
                    validator="# {validateBean.validatePassword}">
                    <f:ajax event="blur" render="passwordError"  />
                </h:inputText>
                <h:message for="password" id="passwordError"   style="color:red" />
                <h:commandButton value="Login" action="# {validateBean.login}" />
            </h:panelGrid>
        </h:form>
    </center>
</ui:define>
</ui:composition>
</html>

为了更清楚，这里是 jsf 模板页面：

<!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:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Default title</ui:insert></title>
</head>

<body>

<div id="header">
<ui:insert name="header">

    <ui:include src="header.xhtml"/> // normal page contains plain text
 </ui:insert>
 </div>

 <div id="content">
 <ui:insert name="content">
    Content area.  See comments below this line in the source.

  </ui:insert>
  </div>

   <div id="footer">
   <ui:insert name="footer">

    <ui:include src="footer.xhtml"/> // normal page contains plain text
    </ui:insert> 
    </div>

    </body>

     </html>

当我尝试后一种方法时，AJAX 操作根本没有触发，请任何人向我解释为什么会发生这种情况？？

【问题讨论】：

如果没有看到模板的源代码，这个问题是无法回答的，由于某些不清楚的原因，您在问题中完全省略了该源代码。同时，通过stackoverflow.com/questions/2118656/…自己排除所有可能的原因。在未来的问题中，请发布足够的信息，以便一个人（包括您自己！）能够在一个完全空白的项目中准确重现所描述的问题，并将所有内容设置为默认值。

标签： jsf jsf-2

【解决方案1】：

您在主模板中使用了<head> 而不是<h:head>。这样，JSF 无法自动包含 ajax 工作所需的 jsf.js JavaScript 文件。

相应地修复它：

<html ...>
    <h:head>
        ...
    </h:head>
    <h:body>
        ...
    </h:body>
</html>

另见：

commandButton/commandLink/ajax action/listener method not invoked or input value not updated - 第 6 点

【讨论】：