CODEWITHSUNDEEP
jsf-2primefaces
Tushar Agarwal
Tushar Agarwal

Reputation: 511

p:layoutUnit content not changing on p:tree node selection

I am trying to update the content of PrimeFaces <p:layoutUnit> on <p:tree> node selection. However, when I select a node, the content does not change. When I refresh the page I see that the content is changed.

How can I change the content without refreshing the whole page?

My view code is:

<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>

Upvotes: 0

Views: 3179

Answers (2)

Bhesh Gurung
Bhesh Gurung

Reputation: 51030

First, you should not put the layout-units inside form, instead put forms inside layout-units.

Another problem is that you have nested forms, you should not have nested forms.

Your form <h:form id="from" is at the wrong spot. You should move it inside <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>

Also consider using a h:panelGroup instead of <h:form id="myForm" and update the panelgroup, because you don't need that h:form there:

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

And update that panelgroup:

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

Upvotes: 2

spauny
spauny

Reputation: 5096

You haven't understood and you haven't payed attention to what I said to you in your previous question. You don't try to update an entire layoutUnit. Instead you update a form inside that layoutUnit or, again, a panel inside that form, a panel that contains the data you want to be updated. In this case, your code would be: 

<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>

Upvotes: 1

Related Questions