ページの読み込み時にコンテンツを含まないダイアログがあり、ユーザーがクリックしたリンクに基づいてダイアログボックスのコンテンツを動的に設定しています。
<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>
私が抱えている問題は、「続きを読む」リンクをクリックすると、ダイアログが表示されるが、ダイアログがページの中央にないことです。 commandLinkのudpate属性をupdate=":dialog"
に変更すると、ダイアログが開いてすぐに閉じるように点滅します。
ダイアログを更新し、動的コンテンツの中心に置くにはどうすればよいですか?
onclick
が実行されますbefore ajaxリクエスト。代わりにoncomplete
でダイアログを開く必要があります。これは実行されますafter ajaxリクエストと更新。つまり、<p:dialog>
は、visible
属性がtrue
を評価しない限り、デフォルトで非表示になります。
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}"
update=":dialog" oncomplete="dlg.show()">
無関係具体的な問題に対して、EL 2.2以降、十分なオブジェクトをメソッド引数として渡すことができることを知っていますか?これにより、<f:attribute>
およびactionListener
が「ハッキング」されなくなります。
<p:commandLink value="Read more" action="#{content.getFullArticle(news)}"
update=":dialog" oncomplete="dlg.show()" />
同じ問題がありました。ダイアログを更新すると、ダイアログが消えて再表示されます(そしてその位置を忘れます)。
それを解決するために、ダイアログコンテンツの周りにラッパータグを作成しました。
<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>