Направляет, как обновлять содержимое в диалоговом окне и поддерживать диалог в центре?

У меня есть диалог, который не содержит содержимого на загрузке страницы, и я динамически настраиваю содержимое диалогового окна на основе ссылки, на которую пользователь нажимает.

<p:dialog widgetVar="dlg" modal="true" id="dialog">
    <p:panel id="fullArticle">
        <h:outputText value="#{content.newsArticle}" escape="false" />
    </p:panel>
 </p:dialog>
...
...
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" onclick='dlg.show();' update=":fullArticle">
    <f:attribute name="contentId" value="#{news.contentId}" />
</p:commandLink>

Проблема, с которой я сталкиваюсь, заключается в том, что, когда вы нажимаете ссылку "Читать дальше", она показывает диалог, но диалог не сосредоточен на странице. Если я изменю атрибут udpate на commandLink на update=":dialog", диалоговое окно начнет мигать, как будто оно откроется и сразу же закрывается.

Как обновить диалоговое окно и сосредоточить его на динамическом контенте?

Ответ 1

onclick выполняется перед запросом ajax. Вам нужно открыть диалог oncomplete. Это будет выполнено после запроса ajax и обновления. <p:dialog> по умолчанию скрыт, если его атрибут visible не оценивает true.

<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" 
    update=":dialog" oncomplete="dlg.show()">

Несвязанный к конкретной проблеме, знаете ли вы, что вы можете передавать полнофункциональные объекты в качестве аргументов метода, так как EL 2.2? Это делает излишним <f:attribute> и actionListener "hack":

<p:commandLink value="Read more" action="#{content.getFullArticle(news)}" 
    update=":dialog" oncomplete="dlg.show()" />

Ответ 2

У меня была та же проблема. Обновление диалогового окна заставляет его исчезать и снова появляться (и забыть о его позиции).

Чтобы решить эту проблему, я создал тег-оболочку вокруг содержимого диалогового окна.

<p:commandLink update=":playerViewDialogHeader,:playerViewDialogContent"
               oncomplete='playerViewDialogJS.show()' value='#{item.name}' />


<p:dialog id='playerViewDialog' widgetVar='playerViewDialogJS'>

   <f:facet name="header">
      <h:outputText id="playerViewDialogHeader" value="#{playerController.objectView.name}" />
   </f:facet>

   <h:form id='playerViewDialogContent'>
      <!-- CONTENT GOES HERE -->
   </h:form>

</p:dialog>