Primefaces, wie man Inhalte in einem Dialog aktualisiert und den Dialog zentriert hält?

Question

Ich habe ein Dialogfeld, das beim Laden der Seite keinen Inhalt enthält, und ich setze den Inhalt eines Dialogfelds dynamisch anhand des Links, auf den ein Benutzer klickt.

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

Das Problem, das ich habe, ist, dass, wenn Sie den „Mehr lesen“ Link klicken, den Dialog zeigt, aber der Dialog nicht auf der Seite zentriert ist. Wenn ich das udpate-Attribut im commandLink zu update=":dialog" ändere, blinkt das Dialogfeld so, als würde es sich öffnen und dann sofort schließen.

Wie kann ich den Dialog aktualisieren und ihn mit dynamischen Inhalten zentrieren?

Answer 1

Die onclick wird ausgeführt vor die Ajax-Anfrage. Sie müssen den Dialog stattdessen in oncomplete öffnen. Dies wird ausgeführt nach die Ajax-Anfrage und aktualisieren. Die <p:dialog> ist nämlich standardmäßig ausgeblendet, es sei denn, ihr visible Attribut wertet true aus.

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

---

Unrelated auf die konkrete Problem, Sie sind sich bewusst, dass Sie 2.2 fullworthy Objekte als Methodenargumente, da EL passieren kann? Dies macht die <f:attribute> und actionListener "Hack" überflüssig:

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

Answer 2

ich hatte das gleiche Problem. Durch das Aktualisieren des Dialogfelds wird es ausgeblendet und wieder angezeigt (und seine Position wird vergessen).

Um es zu lösen, habe ich einen Wrapper-Tag um den Dialog Inhalt erstellt.

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