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>