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>

Solution

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

Comments

[leo173]

thx for your reply,i had tried update=":content" and even attached with form id ,but it didn't work.

[Matt Handy]

Did you try to update the layoutUnit like in the code example of my answer? I don't know if it is possible to update non-jsf elements (div) with jsf-ajax calls.

[leo173]

Yes,I have done that,but it also doesn't work. I have seen the log on the console. It showed the click action fired a complete lifecycle of jsf. Are there any other reasons with this problem?

[Matt Handy]

How is the p:layoutUnit rendered in html? Background is that you can only update components that are physically present in your rendered html page. Sometimes wrapping the problematic component with p:panelGroup will help (you could try to wrap your p:layoutUnit. This will be rendered as span in html and is physically there even if the content of the panelGroup is not rendered. Another idea: look at the ids in your html source and compare them to the ones used in your facelet.

[leo173]

After replaced these codes above, the right content part of this page still didn't refresh. And I have checked out my html source, h:panelGroup indeed rendered a div and the id named content.p:commandLink rendered a onclick event and a widget of ajax, and update the content div.

[leo173]

I have done that work you said above, the id is the right one which I want to update.How strange!

[leo173]

I also replace the div with <p:outputPanel> but failed again.

[BalusC]

What is the generated id of the panelgroup? Prefix it with : and set it fully in the update attribute of the commandlink.

[leo173]

Ok! The html source of command link:<a id="BizTypeTreeTableForm:BizTypeTreeTable:8:j_idt24" href="javascript:void(0);" onclick="PrimeFaces.ajax.AjaxRequest('/JSNX_CFG/BSTypeCfg/BS‌​TypeLayout.jsf',{for‌​mId:'BizTypeTreeTabl‌​eForm',async:false,g‌​lobal:true,source:'B‌​izTypeTreeTableForm:‌​BizTypeTreeTable:8:j‌​_idt24',process:'@al‌​l',update:'BizTypeTr‌​eeTableForm:content'‌​});"> ViewDetail</a> . h:panelGroup html source:<div id="BizTypeTreeTableForm:center" style="text-align:left;"><div id="BizTypeTreeTableForm:content">...</div></div>

[BalusC]

OK, the update should be update=":BizTypeTreeTableForm:content". Do not change the component IDs!

[BalusC]

By the way, I was just asking for the generated client id, not the entire element...

[leo173]

It seems failed again. Do you still think the update pointed to a wrong id?

[BalusC]

Based on the information present as far in this topic, it should work fine. If it doesn't then the problem lies somewhere or it's just your misinterpretation. Are you familiar with JS and with JS debugging tools like Firebug? I'd give it a shot.

[leo173]

What do you mean by client id? I just see the client id `BizTypeTreeTableForm:j_idt16 at bottom of this source page.

[leo173]

Thanks for your help! I would download it and have a try.

[Matt Handy]

From my experience it is sometimes a bit tricky to make ajax calls from repeated components such like a p:treeTable. As a test you could try to make the ajax call from outside the p:treeTable. It would not be a real solution but at least you knew who to blame.