как обновить указанную часть страницы с помощью p: commandLink простых лиц?

Среда: Tomcat 6, jsf 2.0, Prime Faces 2.2.1, Chrome Explorer

Я хочу щелкнуть ссылку «ViewDetail» в левом расширенном дереве и показать подробную информацию о продукте. Но код ниже не работал. Затем я добавляю к ссылке атрибут ajax="false", вроде работает. Но «p:treeTable», который находится в левой части страницы, также обновляется и сворачивается. Итак, как я могу это сделать: щелкните ссылку в левом расширенном узле дерева, отобразите информацию в правой части страницы и оставьте левый расширенный узел дерева все еще раскрытым.

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

layout jsf primefaces commandlink
person leo173    schedule 23.03.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

update должен указывать на реальный компонент JSF в дереве, а не на простой элемент HTML.

Заменять

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

by

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

Группа панелей с layout="block" будет отображать <div> вместо <span>.

person BalusC    schedule 23.03.2011
comment
После замены этих кодов выше правая часть содержимого этой страницы по-прежнему не обновлялась. И я проверил свой исходный код html, h:panelGroup действительно отобразил div, а идентификатор с именем content.p:commandLink отобразил событие onclick и виджет ajax и обновил content div. - person leo173; 24.03.2011
comment
Я также заменил div на <p:outputPanel>, но снова не удалось. - person leo173; 24.03.2011
comment
Что такое сгенерированная id группы панелей? Добавьте к нему префикс : и полностью установите его в атрибуте update командной ссылки. - person BalusC; 24.03.2011
comment
Ok! HTML-источник ссылки на команду: <a id="BizTypeTreeTableForm:BizTypeTreeTable:8:j_idt24" href="javascript:void(0);" onclick="PrimeFaces.ajax.AjaxRequest('/JSNX_CFG/BSTypeCfg/BSTypeLayout.jsf',{formId:'BizTypeTreeTableForm',async:false,global:true,source:'BizTypeTreeTableForm:BizTypeTreeTable:8:j_idt24',process:'@all',update:'BizTypeTreeTableForm:content'});"> ViewDetail</a> . h:panelGroup HTML-источник: <div id="BizTypeTreeTableForm:center" style="text-align:left;"><div id="BizTypeTreeTableForm:content">...</div></div> - person leo173; 24.03.2011
comment
Хорошо, обновление должно быть update=":BizTypeTreeTableForm:content". Не меняйте идентификаторы компонентов! - person BalusC; 24.03.2011
comment
Кстати, я просто просил сгенерированный клиент id, а не весь элемент... - person BalusC; 24.03.2011
comment
Кажется, снова не удалось. Вы все еще думаете, что обновление указывало на неправильный идентификатор? - person leo173; 24.03.2011
comment
Судя по информации, представленной в этой теме, все должно работать нормально. Если это не так, то проблема где-то кроется или это просто ваша неверная интерпретация. Вы знакомы с JS и инструментами отладки JS, такими как Firebug? Я бы попробовал. - person BalusC; 24.03.2011
comment
Что вы подразумеваете под идентификатором клиента? Я просто вижу идентификатор клиента `BizTypeTreeTableForm:j_idt16 внизу этой исходной страницы. - person leo173; 24.03.2011
comment
Спасибо за вашу помощь! Я бы скачал и попробовал. - person leo173; 24.03.2011

arrow_upward
0
arrow_downward

Я думаю, что ваша ссылка на идентификатор неверна, поскольку div и p:layout не одного уровня.

Но вы можете либо попытаться получить абсолютный идентификатор, используя update=":content", либо обновить весь p:layoutUnit:

<p:commandLink value="ViewDetail" 
               update="center" 
               action="#{treeTableController.showDetail}">
person Matt Handy    schedule 23.03.2011
comment
спасибо за ваш ответ, я попробовал update=:content и даже прикрепил идентификатор формы, но это не сработало. - person leo173; 23.03.2011
comment
Вы пытались обновить layoutUnit, как в примере кода моего ответа? Я не знаю, можно ли обновлять не-jsf-элементы (div) с помощью вызовов jsf-ajax. - person Matt Handy; 23.03.2011
comment
Да, я сделал это, но это также не работает. Я видел журнал на консоли. Он показал, что действие щелчка запустило полный жизненный цикл jsf. Есть ли другие причины этой проблемы? - person leo173; 23.03.2011
comment
Как p:layoutUnit отображается в html? Предыстория заключается в том, что вы можете обновлять только те компоненты, которые физически присутствуют на вашей отображаемой html-странице. Иногда помогает обернуть проблемный компонент p:panelGroup (можно попробовать обернуть p:layoutUnit. Он будет отображаться как span в html и физически присутствует, даже если содержимое PanelGroup не отображается. Еще одна идея: посмотрите на идентификаторы в вашем html и сравните их с теми, которые используются в вашем Facelet. - person Matt Handy; 23.03.2011
comment
Я сделал ту работу, которую вы сказали выше, идентификатор правильный, который я хочу обновить. Как странно! - person leo173; 24.03.2011
comment
По моему опыту, иногда бывает немного сложно выполнять ajax-вызовы из повторяющихся компонентов, таких как p:treeTable. В качестве теста вы можете попробовать сделать вызов ajax из-за пределов p:treeTable. Это не было бы реальным решением, но, по крайней мере, вы знали, кого винить. - person Matt Handy; 24.03.2011