That gets tricky if the both <p:messages>
components have an autoUpdate="true"
. It would be doable if only the page's <p:messages>
is auto-updated. If you can ensure that the page's <p:messages>
appears in JSF component tree after the dialog's <p:messages>
, then it's a matter of setting the redisplay
attribute of page's <p:messages>
to false
and making sure that each of the dialog's actions updates the dialog's own form with therein the <p:messages>
.
<p:dialog>
<h:form>
<p:messages />
...
<p:commandButton ... update="@form" />
</h:form>
</p:dialog>
<p:messages autoUpdate="true" redisplay="false" />
No additional JS is necessary. You may only need to alter your templates to have an <ui:define name="dialogs">
above the page's <p:messages>
so that all your dialogs end up there. Or, alternatively, use CSS to position the page's <p:messages>
absolutely. Or, maybe, use JS to relocate the page's <p:messages>
to there where you'd like to have it in HTML DOM.