Question

I have a dialog that contains no content on page load and I’m dynamically setting the content of a dialog box based on the link that a user clicks on.

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

The problem i’m having is that when you click the “Read More” link, it shows the dialog, but the dialog is not centered on the page. If i change the udpate attribute on the commandLink to update=":dialog", the dialog flashes as if it’s opening and then closing right away.

How can I update the dialog and have it be centered with dynamic content?

Answer 1

The onclick is executed before the ajax request. You need to open the dialog in oncomplete instead. This will be executed after the ajax request and update. The <p:dialog> is namely by default hidden unless its visible attribute evaluates true.

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

---

Unrelated to the concrete problem, are you aware that you can pass fullworthy objects as method arguments since EL 2.2? This makes the <f:attribute> and actionListener “hack” superfluous:

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