ui:include with 方法破坏了 jsf 的 ajax 功能答案

【问题标题】：ui:include with method breaks the jsf's ajax functionui:include with 方法破坏了 jsf 的 ajax 功能
【发布时间】：2012-07-26 14:15:05
【问题描述】：

我遇到了一个非常相似的问题，我已经提出了问题，但现在问题出现在我的主要项目中。上一张票涉及一个测试项目。 Here's 票的链接。我先简单解释一下我的项目，然后提供代码。

这是一个基本的用户界面，因为我省略了不相关的部分，但是当您启动 web 应用程序时，您应该被定向到通过使用 ajax 加载了介绍的主页。我正在使用一个名为 Navigation 的 managedbean，它是一个简单的 pojo，带有 2 个注释和一个名为“page”的字符串属性。我已将该属性设置为“intro”，因此默认情况下会加载它。

// Navigation.java
@ManagedBean
@RequestScoped
public class Navigation {

  private String page = "intro";

  public String getPage() {
      return page;
  }

  public void setPage(String page) {
    this.page = page;
  }
}

index.xhtml 看起来像这样：

<!-- index.xhtml -->
<h:body>
    <!-- Navigation -->
    <h:form>
        <p:menubar>
            <p:menuitem value="Home" icon="ui-icon-home" action="#{navigation.setPage('intro')}" update=":contentPanel" />
            <p:submenu label="Actions" icon="ui-icon-transferthick-e-w">
                <p:submenu label="Employee">
                    <p:menuitem value="Search" action="#{navigation.setPage('employee/find')}" update=":contentPanel" />
                </p:submenu>
            </p:submenu>
        </p:menubar>
    </h:form>
    <!-- ContentPanel -->
    <p:panel id="contentPanel" styleClass="content">
       <ui:include src="/#{navigation.page}.xhtml" />
    </p:panel>
</h:body>

现在，当您导航到“操作/员工/新建”时，文件 find.xhtml 确实会加载到主页中，但是表单本身不起作用。这是文件：

<!-- find.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            xmlns:f="http://java.sun.com/jsf/core">
    <f:facet name="header">
      Create new employee
    </f:facet>
    <h:outputLabel value="User ID: " for="userId" />
    <p:inputText value="#{managedEmployee.userId}" id="userId" />
    <p:commandButton value="Show" update="result" />
    <h:outputText id="result" value="#{managedEmployee.userId}" />
</ui:composition>

因此，用户将能够在表单中输入用户 ID，并且当按下命令按钮时，它将显示在表单附近。显然我一定做错了什么，但我似乎无法弄清楚。我不喜欢这样说，但我很想得到答案。

提前致谢！

【问题讨论】：

标签： ajax primefaces

【解决方案1】：

我可能不理解这个问题，但您的 commandButton 上没有设置操作，所以它当然不会做任何事情。

 <p:commandButton value="Show" update="result" />

应该有类似的东西

 <p:commandButton value="Show" update="result" action="#{backer.method}"/>

【讨论】：

我不认为是这样，因为当我手动包含这样的文件时：，表单有效。但是当我使用 #{navigation.page} 并导航到表单时，表单确实会加载到主页但停止工作。
哦，我想我明白你现在在问什么了。两种方式都可以验证生成的 html 标记是否相同？您的控制台是否也出现错误？
我没有看到任何错误并且来源似乎匹配。我一直在调查此事，可能与客户端和服务器端有关。

【解决方案2】：

我找到了解决问题的方法。不确定原因是什么，但是如果我将 ui:composition 中的代码用 h:form 包围，并添加该表单 ID 以更新它可以工作的链接。希望这可以帮助其他人遇到它。干杯

<p:menuitem value="Create" action="#{navigationBean.setPage('employee/create')}" update=":contentPanel :form" />

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui">
  <h:form id="form">
    ...
  </h:form>
</ui:composition>

【讨论】：