Содержимое p: layoutUnit не изменяется при выборе узла p: tree - PullRequest
Новая
       3

Содержимое p: layoutUnit не изменяется при выборе узла p: tree

0 голосов
/ 18 ноября 2011

Я пытаюсь обновить содержимое PrimeFaces <p:layoutUnit> на <p:tree> выборе узла. Тем не менее, когда я выбираю узел, содержимое не меняется. Когда я обновляю страницу, я вижу, что содержание изменилось.

Как изменить содержание без обновления всей страницы?

Мой код просмотра: 

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

Ответы [ 2 ]

2 голосов
/ 18 ноября 2011

Во-первых, вы не должны помещать модули макета в форму, вместо этого помещайте формы в модули макета.

Другая проблема заключается в том, что у вас есть вложенные формы, у вас не должно быть вложенных форм.

Ваша форма <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" и обновите группу панелей, потому что там вам не нужен h:form: 

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

И обновить эту группу панелей: 

<p:ajax listener="#{treeBean.onNodeSelect}" update="centerContentPanel" event="select"/>
1 голос
/ 18 ноября 2011

Вы не поняли и не обратили внимания на то, что я сказал вам в вашем предыдущем вопросе . Вы не пытаетесь обновить весь 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>
...