2

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>
leo173
  • 303
  • 2
  • 5
  • 13

2 Answers2

6

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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 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 Mar 24 '11 at 01:57
  • I also replace the div with `` but failed again. – leo173 Mar 24 '11 at 02:24
  • What is the generated `id` of the panelgroup? Prefix it with `:` and set it fully in the `update` attribute of the commandlink. – BalusC Mar 24 '11 at 02:26
  • Ok! The html source of command link:` ViewDetail` . `h:panelGroup` html source:`
    ...
    `     – leo173 Mar 24 '11 at 02:38
  • OK, the update should be `update=":BizTypeTreeTableForm:content"`. Do not change the component IDs! – BalusC Mar 24 '11 at 02:41
  • By the way, I was just asking for the generated client `id`, not the entire element... – BalusC Mar 24 '11 at 02:42
  • It seems failed again. Do you still think the update pointed to a wrong id? – leo173 Mar 24 '11 at 03:04
  • 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. – BalusC Mar 24 '11 at 03:06
  • What do you mean by client id? I just see the client id `BizTypeTreeTableForm:j_idt16 at bottom of this source page. – leo173 Mar 24 '11 at 03:08
  • Thanks for your help! I would download it and have a try. – leo173 Mar 24 '11 at 03:10
0

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}">
Matt Handy
  • 29,855
  • 2
  • 89
  • 112
  • thx for your reply,i had tried **update=":content"** and even attached with form id ,but it didn't work. – leo173 Mar 23 '11 at 07:39
  • 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. – Matt Handy Mar 23 '11 at 07:41
  • 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? – leo173 Mar 23 '11 at 08:32
  • 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. – Matt Handy Mar 23 '11 at 08:45
  • I have done that work you said above, the id is the right one which I want to update.How strange! – leo173 Mar 24 '11 at 02:13
  • 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. – Matt Handy Mar 24 '11 at 11:15