ui:include inside TabView: tab中的第一个ajax调用不会触发(commandButton操作)

Question

下面的代码是tabView，后面是加载页面的结构。对于commandButton，我尝试了actionListener，显式引用目标输入文本区域(req)的呈现和更新的不同组合，等等。当表单在自己的页面中(而不是在选项卡中)运行时，该操作工作得很好。

在"preRenderView“事件中，我初始化数据结构，这些数据结构在表单显示时被填充。问题是当我点击预览按钮的时候。通常操作会触发，处理方法组装数据以在预览inputextarea (req)中显示，并将其显示。

奇怪的是，当我单击该按钮时，该操作并未被调用，尽管有一些活动调用了我的其他选项卡的loadReqEvents，并且在外部页面中托管了该tabView。我怀疑这是我不知道的JSF的请求-响应细微差别。谢谢你的帮助。

<p:tabView id="tbv" dynamic= "true" activeIndex="#{sessionController.activeTab}" styleClass="tabview-style">       
  <p:tab id="rtmTab" styleClass="tab-style" title="RTM" closable="false" titletip="Requirements Traceability Matrix">
      <ui:include src="url(./../rtm.xhtml"/>
   </p:tab>
   <p:tab id="composeTab" styleClass="tab-style" title="#{sessionController.composeTabTitle}" rendered="#{sessionController.crudTabRendered}" closable="false" titletip="Composition Form">
      <ui:include src="url(./..#{sessionController.composeUrl}.xhtml"/>
   </p:tab>
   <p:tab id="objTab" styleClass="tab-style" title="Object / Data Model" closable="false" titletip="Object and Data Model View">
      <ui:include src="url(./../objView.xhtml"/>
   </p:tab>
</p:tabView>  
</p:layoutUnit>


<p:layoutUnit id="formLayout" position="center" gutter="0" styleClass="form-layout"> 
  <h:form>
    <f:event listener="#{attrDefController.loadReqEvent}" type="preRenderView"></f:event>  
    <p:panel style="background-color:rgb(222,231,254);width:925px;height:98%;margin-top:-4px;margin-left:-8px">
      <h:panelGrid columns="7" style="margin-right:-8px" cellpadding="2">
          <h:commandButton id="preview" value="Preview" action="#{attrDefController.previewReqAction}" style="width:100px; margin-top:2px">
             <f:ajax execute="@form" render="req"/>
          </h:commandButton>
       </h:panelGrid>
     </p:panel>
   </h:form>
 </p:layoutUnit>

Answer 1

在没有看到声明组件req的位置的标记的情况下，我假定它存在于ui:include中指定的某个xhtml文件中。

问题是f:ajax的render属性指定了一个页面上不存在的id。这样做的原因是，组件的客户端ID将以其父UINamingContainer的客户端id为前缀。

并不是所有的JSF组件都是UINamingContainer，form肯定是，这就是为什么您通常会看到表单的ID作为组件的客户端id的前缀。例如：

<h:form id="formone">
  <h:outputText id="textComponent" value="YO" />
  <h:commandButton ...>
    <f:ajax update="textComponent" />
  </h:commandButton>
</h:form>
<h:form id="formtwo">
  <h:commandButton ...>
    <f:ajax update=":formone:textComponent" />
  </h:commandButton>
</h:form>

在上面的示例中，textComponent的客户端ID实际上是formone:textComponent。现在，上面示例中的命令按钮仍然可以通过它的实际ID引用它，因为它恰好与它的同级组件在相同的UINamingContainer中。

但是，另一种形式的commandButton必须通过其完整的客户端id来访问它，因为它不是textComponent的同级。为此，它在客户机ID前面加上通用选择符:，然后在后面加上textComponent的整个客户机ID。

这跟你的问题有什么关系？

PrimeFaces TabView组件恰好也是一个UINamingContainer。

因此，这意味着要使用ID req呈现组件，您需要为表单指定一个ID，并以这种方式调用它...

render=":formid:tbv:req"

我希望这是有意义的。