PrimeFaces：如何更新表单外的tabView？场景问题求助

我来帮你捋清楚这个问题——你完全不需要嵌套表单，更不用重载整个页面，PrimeFaces的AJAX机制就能完美解决这个场景。

问题根源 #

你的p:commandButton在frmWork表单内部，而目标TabView在这个表单之外。默认情况下，AJAX请求只能更新发起请求的表单内部的组件，跨表单更新需要你明确指定目标组件的完整客户端ID，否则JSF找不到要更新的元素。另外，如果TabView初始是隐藏的（rendered为false），直接更新它可能会因为客户端没有这个组件的ID而失败。

具体解决方案 #

1. 给TabView加容器（应对初始隐藏场景）

因为你需要在父对象创建前隐藏TabView，初始状态下rendered="#{empty workBean.currentWork}"会让TabView不渲染到客户端，AJAX无法直接更新它。所以先给它套一个始终渲染的容器：

<h:panelGroup id="tabContainer">
  <p:tabView id="workTabs" rendered="#{not empty workBean.currentWork}">
    <!-- 每个标签页的独立表单 -->
    <p:tab title="Tab 1">
      <h:form id="tab1Form">...</h:form>
    </p:tab>
    <p:tab title="Tab 2">
      <h:form id="tab2Form">...</h:form>
    </p:tab>
  </p:tabView>
</h:panelGroup>

2. 修改CommandButton的AJAX更新目标

在你的btnEdit按钮里，指定更新这个容器的完整ID（注意前面的冒号:表示从页面根节点开始查找）：

<h:form id="frmWork">
  ...
  <p:commandButton id="btnEdit" value="#{msgs.edit}" styleClass="Fright" 
                    actionListener="#{workBean.edit()}" 
                    update=":tabContainer" />
</h:form>

3. 确保后台Bean正确更新状态

一定要在workBean.edit()方法里，正确初始化或更新currentWork对象（也就是控制TabView渲染的那个属性），这样AJAX更新后，rendered="#{not empty workBean.currentWork}"的条件才会生效，TabView才能正常显示或刷新内容。

关键注意事项 #

• 绝对不要嵌套表单：JSF规范明确禁止嵌套表单，会导致表单提交、AJAX请求等一系列异常。你现在每个标签页用独立表单的设计是完全合理的，保持这个结构就行。
• 不要重载页面：AJAX局部更新能提供更好的用户体验，完全没必要用整页刷新。

内容的提问来源于stack exchange，提问作者Joe