Primefaces how to update content in a dialog and keep the dialog centered?

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?

score 42 · Accepted Answer · answered May 18 '12 at 20:39

42

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()" />

answered May 18 '12 at 20:39

BalusC

1,082,665
372
3,610
3,555

I'm running on tomcat 6 and that doesn't support the EL 2.2 does it? – Catfish May 18 '12 at 20:44
Oh, it doesn't. But you could just install JBoss EL for that: http://stackoverflow.com/questions/3284236/jsf-2-0-method-invocation/3284328#3284328 – BalusC May 18 '12 at 20:44
server guys won't buy that one here. I'll have to stick with attribute/actionlistener. Thanks for the advice though. – Catfish May 18 '12 at 20:46
Bummer then. Even not when just in webapp's own `/WEB-INF/lib`? Anyway, no problem and you're welcome :) – BalusC May 18 '12 at 20:47
why is there a `:` in `update=":dialog"` vs just saying `update="dialog"` without a `:` ? – amphibient Sep 23 '15 at 18:49
@amphibient: usually, you don't put it in the same form for the reasons mentioned a.o. here http://stackoverflow.com/a/18958907 and here http://stackoverflow.com/a/7372315 – BalusC Sep 23 '15 at 18:52
ok but i don't understand the function of the `:` notation, if you could explain that would be great (i would be happy to enter a separate question) – amphibient Sep 23 '15 at 18:53

Luís Soares · Answer 2 · 2016-12-03T13:26:48.003

I had the same problem. Updating the dialog makes it disappear and reappear (and forget its position).

To solve it, I created a wrapper tag around the dialog content.

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

Primefaces how to update content in a dialog and keep the dialog centered?

2 Answers2

Linked