異なるUIの要素を更新できません：define

Question

私はui：insertタグを持つテンプレートを使っています。 ページでは、そのうち2つ（content、rightSide）を定義します（ui：define）。 rowSelectにイベントを設定して、1つの行の詳細が右側に表示されるようにします。 これまでのところ、ajaxを介してrightSideDivを更新することができませんでした。

<?xml version="1.0" encoding="UTF-8"?> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:p="http://primefaces.org/ui" 
    template="/WEB-INF/templates/template.xhtml"> 

    <ui:define name="content"> 

     <p:dataTable id="clasifTable" var="clasif" value="#{clasificacionController.clasificaciones}" 
      rows="10" sortMode="multiple" selectionMode="single" rowKey="#{clasif.idClasificacion}"> 
      <p:ajax event="rowSelect" listener="#{clasificacionController.onClasificacionSelect}" update="rightSideDiv" /> 

      <p:column headerText="Id" sortBy="#{clasif.idClasificacion}"> 
       <h:outputText value="#{clasif.idClasificacion}" /> 
      </p:column> 

      <p:column headerText="Descripción" sortBy="#{clasif.descripcion}"> 
       <h:outputText value="#{clasif.descripcion}" /> 
      </p:column> 

      </p:column> 
     </p:dataTable> 

    </ui:define> 

    <ui:define name="rightSide"> 
     <div id="rightSideDiv"> 
      <p:panelGrid columns="2"> 
       <p:outputLabel for="idClasificacionText" value="id:" /> 
       <p:inputText id="idClasificacionText" value="#{clasificacion.idClasificacion}"/> 
       <p:outputLabel for="descripcionText" value="Descripción:"/> 
       <p:inputText id="descripcionText" value="#{clasificacion.descripcion}"/> 
       <p:outputLabel for="detalleText" value="Detalle:"/> 
       <p:inputText id="detalleText" value="#{clasificacion.detalle}"/> 
      </p:panelGrid> 
     </div> 
    </ui:define> 

</ui:composition> 

この投稿は、update="@all"を使用して示唆し、私は

ajax is not updating a component situated in another <ui:define

を見つけるcoudしかし、ページ全体を再レンダリングされますので、明らかにこれは理想的ではない唯一の回避策です。また、2012年の投稿ですので、これについて新しいことがあることを願っていました。

私はprimefaces 6.0とjsf 2.1を使用しています。

Answer 1

HTML要素を更新しようとしています。 <div id="rightSideDiv">をJSFコンポーネント<h:panelGroup id="rightSideDiv" layout="block">に置き換えると正常に動作します。