web-dev-qa-db-fra.com

Primefaces comment mettre à jour le contenu d'une boîte de dialogue et garder la boîte de dialogue centrée?

J'ai une boîte de dialogue qui ne contient aucun contenu lors du chargement de la page et je définis dynamiquement le contenu d'une boîte de dialogue en fonction du lien sur lequel un utilisateur clique.

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

Le problème que j'ai est que lorsque vous cliquez sur le lien "En savoir plus", il affiche la boîte de dialogue, mais la boîte de dialogue n'est pas centrée sur la page. Si je change l'attribut udpate sur le lien de commande en update=":dialog", la boîte de dialogue clignote comme si elle s'ouvrait puis se fermait immédiatement.

Comment mettre à jour la boîte de dialogue et la centrer avec du contenu dynamique?

jsfjsf-2primefaces
17
Catfish

onclick est exécuté avant la requête ajax. Vous devez plutôt ouvrir la boîte de dialogue dans oncomplete. Cela sera exécuté après la demande ajax et la mise à jour. Le <p:dialog> est caché par défaut sauf si son attribut visible évalue true.

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

Sans rapport au problème concret, savez-vous que vous pouvez passer des objets valables comme arguments de méthode depuis EL 2.2? Cela rend le <f:attribute> et actionListener "hack" superflu:

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

J'ai eu le même problème. La mise à jour de la boîte de dialogue la fait disparaître et réapparaître (et oublier sa position).

Pour le résoudre, j'ai créé une balise wrapper autour du contenu de la boîte de dialogue.

<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>
6
Luís Soares