p：佈局單元內容不會改變p：樹節點選擇

Question

我正在嘗試更新<p:tree>節點選擇的PrimeFaces <p:layoutUnit>的內容。但是，當我選擇一個節點時，內容不會改變。當我刷新頁面時，我發現內容已更改。

如何在不刷新整個頁面的情況下更改內容？

我的看法代碼：

<h:body> 
    <h:form id="form"> 
     <p:layout fullPage="true"> 
      <p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false"> 
       <h:outputText value="Top" /> 
      </p:layoutUnit> 
      <p:layoutUnit position="south" size="100" resizable="flase" closable="false" collapsible="false"> 
       <h:outputText value="Bottom" /> 
      </p:layoutUnit> 
      <p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
       <p:tree id="tree" value="#{treeBean.root}" selection="#{treeBean.selectedNode}" var="node" selectionMode="single" dynamic="true" cache="false" > 
        <p:ajax listener="#{treeBean.onNodeSelect}" update="test" event="select"/> 
        <p:treeNode> 
         <h:outputText value="#{node}"/> 
        </p:treeNode> 
       </p:tree> 
      </p:layoutUnit> 
      <p:layoutUnit position="center" id="test"> 
       <ui:include src="${treeBean.selectedNode.name}.xhtml"/> 
      </p:layoutUnit> 
     </p:layout> 
    </h:form> 
</h:body> 

Answer 1

首先，你不應該把佈局單元內的形式，而不是把裏面的佈局單位形式。

另一個問題是你有嵌套表單，你不應該有嵌套表單。

您的表單<h:form id="from"出錯了。你應該將它裏面<p:layoutUnit position="west"：

<p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
    <h:form id="form"> 
     <p:tree id="tree" value="#{treeBean.root}" selection="#{treeBean.selectedNode}" var="node" selectionMode="single" dynamic="true" cache="false" > 
      <p:ajax listener="#{treeBean.onNodeSelect}" update=":myForm" event="select"/> 
      <p:treeNode> 
       <h:outputText value="#{node}"/> 
      </p:treeNode> 
     </p:tree> 
    </h:form> 
</p:layoutUnit> 

還要考慮使用的h:panelGroup代替<h:form id="myForm"和更新panelGroup中，因爲你並不需要一個h:form有：

<p:layoutUnit position="center"> 
    <h:panelGroup id="centerContentPanel"> 
     <ui:include src="${treeBean.selectedNode.name}.xhtml"/> 
    </h:panelGroup> 
</p:layoutUnit> 

和更新panelGroup中：

<p:ajax listener="#{treeBean.onNodeSelect}" update="centerContentPanel" event="select"/> 

Answer 2

你沒理解，並且您還沒有祈禱，注意一下我在你previous question對你說。您不要嘗試更新整個layoutUnit。而是更新layoutUnit中的表單，或者再次更新該表單中的面板，該面板包含要更新的數據。在這種情況下，你的代碼將是：

<h:body> 
    <h:form id="form"> 
     <p:layout fullPage="true"> 
      <p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false"> 
       <h:outputText value="Top" /> 
      </p:layoutUnit> 
      <p:layoutUnit position="south" size="100" resizable="flase" closable="false" collapsible="false"> 
       <h:outputText value="Bottom" /> 
      </p:layoutUnit> 
      <p:layoutUnit position="west" size="250" header="Tree" resizable="true" closable="flase" collapsible="true"> 
       <p:tree id="tree" value="#{treeBean.root}" selection="#{treeBean.selectedNode}" var="node" selectionMode="single" dynamic="true" cache="false" > 
        <p:ajax listener="#{treeBean.onNodeSelect}" update=":myForm" event="select"/> 
        <p:treeNode> 
         <h:outputText value="#{node}"/> 
        </p:treeNode> 
       </p:tree> 
      </p:layoutUnit> 
      <p:layoutUnit position="center"> 
       <h:form id="myForm"> 
       <ui:include src="${treeBean.selectedNode.name}.xhtml"/> 
       <!-- Pay attention that inside the above xhtml page you don't have to have a form element --> 
       </h:form> 
      </p:layoutUnit> 
     </p:layout> 
    </h:form> 
</h:body>