Primefaces dialog doesn't show up - jsf-2

Question

I want a dialog to show up after I click a commandButton, but it doesn't show up at all.
I think the button is submitting the form instead of showing up a dialog. What's more I've tried to make a 'Cancel' commandButton and it is also not working as it should - it works only if I click it first (if I click commandButton which is suppoused to open a dialog first, the cancel button won't work anymore).
Here's my .xhtml:
<ui:define name="content">
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:form>
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" />
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</h:form>
</p:dialog>
<h:form>
<p:messages/>
<p:pickList value="#{editSkills.skills}" var="skill" effect="none" converter="#{picklistConverter}"
itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}"
showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"
addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" >
<f:facet name="sourceCaption">#{messages.skillsList}</f:facet>
<f:facet name="targetCaption">#{messages.yourSkills}</f:facet>
<p:ajax event="transfer" listener="#{editSkills.onTransfer}" />
<p:column style="width:100%;">
#{skill.umiejetnosc}
</p:column>
</p:pickList>
<p:commandButton value="#{messages.confirm}" actionListener="#{editSkills.afterSubmit}" update=":dlg" oncomplete="dlg.show();" /> THIS IS THE MENTIONED BUTTON
<p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/> THIS IS THE CANCEL BUTTON
</h:form>
</ui:define>
What should I do to make it working well?

Answer 1

Your code seems fine to me :). However, 1 thing you need to note is that the id and widgetVar attributes of the <p:dialog> must not have the same value. Try something like the following:
<p:dialog id="levelDlg" widgetVar="levelDialog">