p:commandButton doesn't dislpay p:dialog - jsf

Question

i have a problem with the display of a dialog on a click. It's a obvious one but i can't spot the bug. I've been stuck on this for days, it's crazy. Can you help me please.
<h:form id="form">
<p:commandButton
rendered="#{characterBean.characterSession.characterName ne null}"
value="#{characterBean.characterSession.title.titleName}"
icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
update="#form"/>
<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
widgetVar="dlg" dynamic="true" closable="false" resizable="false"
showEffect="fade" hideEffect="fade">
<h:panelGroup>
<p:messages autoUpdate="true" />
<h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
value="#{characterBean.characterSession.title}">
<f:selectItems value="#{characterBean.titleUnlocked}" var="t"
itemValue="#{t}" itemLabel="#{t.titleName}" />
</h:selectOneMenu>
<hr />
<h:panelGrid columns="2" style="width: 100%; text-align:center">
<p:commandButton value="#{i18n['general.submit']}"
icon="fa fa-check"
actionListener="#{characterBean.updateCharacterTitle}"
oncomplete="PF('dlg').hide();" update="#form" />
<p:commandButton value="#{i18n['general.cancel']}"
icon="fa fa-close" action="#{characterBean.submitCancel}"
oncomplete="PF('dlg').hide();" update="#form" process="#this" />
</h:panelGrid>
<p:remoteCommand name="updateForm()" process="#this" update="#form" />
</h:panelGroup>
</p:dialog>
</h:form>

Answer 1

The core problem is essentially this:
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form"/>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
The default state of <p:dialog> is hidden.
The onclick shows the dialog.
The update updates the entire content of the <h:form>.
The <p:dialog> is also included in the update.
So, the <p:dialog> gets hidden again.
There are several solutions:
Don't let update include the <p:dialog>.
<h:form>
<h:panelGroup id="outsideDialog">
<p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
</h:panelGroup>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Replace onclick by oncomplete as it runs after the update.
<h:form>
<p:commandButton update="#form" oncomplete="PF('dlg').show();" />
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Move <p:dialog> outside the <h:form> and give it its own <h:form>.
<h:form>
<p:commandButton update="#form :dlg" oncomplete="PF('dlg').show();" />
</h:form>
<p:dialog id="dlg" widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
or, depending on whether you actually need to update the dialog's contents or not
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form" />
</h:form>
<p:dialog widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
The recommended solution is 3.
See also:
Execution order of events when pressing PrimeFaces p:commandButton
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
p:commandbutton action doesn't work inside p:dialog