how to refresh referenced part of page with prime faces' p:commandLink?

Question

Environment: Tomcat 6 ,jsf 2.0,prime faces 2.2.1 ,chrome explorer

I want to click the "ViewDetail" link in the left expanded tree and show the product's detail info. But the code below didn't work. Then I add the attribute ajax="false" to the link, it seems work. But the "p:treeTable" which lies on left part of the page is also refreshed and collapsed. So how can I do for this: click the link on the left expanded tree node, show the info on the right part of the page,and keep the left expanded tree node still expanded.

<h:form id="BizTypeTreeTableForm" >
        <p:layout fullPage="true">
            <p:layoutUnit id="left" position="left" scrollable="true"     width="350" resizable="true" closable="false" collapsible="true" minWidth="250" >
                  <p:treeTable id="BizTypeTreeTable" value="#    {treeTableController.root}" var="treeTable">
                      <p:column>
                              <f:facet name="header">ProductName</f:facet>
                              <h:outputText value="#{treeTable.TYPENAME.value }" />
                          </p:column>
                          <p:column style="width:5%">
                              <f:facet name="header">Action</f:facet>
                              <p:commandLink value="ViewDetail" update="content"      action="#{treeTableController.showDetail}">
                              </p:commandLink>
                      </p:column>
                      </p:treeTable>
            </p:layoutUnit>
            <p:layoutUnit id="center" rendered="true" position="center"    style="text-align:left;" scrollable="true" >
                <h:outputText value="Please click the left tree node" rendered="#    {allTabManager.productObject.TypeNo.value eq null}"/>
            <div id="content" class="ui-widget">
                    <div class="post">
                    <ui:insert name="content_tab" >...</ui:insert>
                </div>
                </div>
            </p:layoutUnit>
         </p:layout>
    </h:form>

Answer 1

The update must point to a real JSF component in the tree, not to a plain HTML element.

Replace

<div id="content" class="ui-widget">

by

<h:panelGroup layout="block" id="content" class="ui-widget">

A panelgroup with layout="block" will render a <div> instead of a <span>.

Answer 2

I think your reference to the id is not correct since the div and the p:layout are not the same level.

But you can either try to get the absolute id by using update=":content" or update the whole p:layoutUnit:

<p:commandLink value="ViewDetail" 
               update="center" 
               action="#{treeTableController.showDetail}">