Primefaces p:dialog does not showing up - jsf-2

Question

I am trying show within the p:dialog-element the p:fileUpload- Element.
Without the p:fileUpload -Element the p:dialog is showing up. Then I add the fileUpload-Tag
and it does nothing. I am using Tomcat 7, mojorra 2.1.28, primefaces 5.0.
<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="WEB-INF/templates/template.xhtml"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<!--Zusätzliches Stylesheet-->
<ui:define name="additionalCSS"> <link rel="stylesheet" type="text/css" href="resources/style/benutzer.css" /> </ui:define>
<!--Titel-->
<ui:define name="title">Ticket schreiben</ui:define>
<!--Hier beginnt der Content-Bereich, der je nach Client variiert-->
<ui:define name="content">
<div id="content">
<div id="verlauf">
<h:form>
<h:commandLink value="Home" action="#{linkController.goHome}"> </h:commandLink> /
<h:commandLink value="Tickets" action="#{linkController.goTicketindex}"></h:commandLink> /
<h:commandLink value="Neues Ticket erstellen" action="#{linkController.goTicketcreate}"></h:commandLink>
</h:form>
</div>
<div id="headline">Neues Ticket erstellen</div>
<h:form>
<div id="stats">
<div id="title">Empfänger</div>
<div class="inputName">An:</div>
<div class="inputContent"> <h:inputText id="user" styleClass="inputText" value="#{ticketController.adress}" >
<!-- validatorMessage="Bitte geben Sie den Empfänger an." >
<f:validateRequired/>-->
</h:inputText> </div>
<div class="inputName">Betreff:</div>
<div class="inputContent"> <h:inputText id="topic" styleClass="inputText" value="#{ticketController.topic}"
></h:inputText> </div>
</div>
<div id="rechte">
<div id="title">Nachricht</div>
<div class="column">
<div class="inputArea"> <h:inputTextarea id="message" styleClass="inputField" value="#{ticketController.message}" >
<!-- validatorMessage="Bitte geben Sie eine Nachricht ein." >
<f:validateRequired/>-->
</h:inputTextarea> </div>
</div>
<br/>
<p:dialog widgetVar="dialogVar" modal="true" minHeight="100" draggable="true" >
<p:fileUpload fileLimit="20000" fileLimitMessage="File ist zu groß" fileUploadListener="#{ticketController.fileUploadHandler}"></p:fileUpload>
</p:dialog>
<h:commandButton value="Datei Uploaden" type="button" styleClass="submitButton" onclick="dialogVar.show()"></h:commandButton>
<h:commandButton value="Anlegen" type="submit" styleClass ="submitButton"
action="#{ticketController.createNewTicket}"></h:commandButton>
</div>
</h:form>
</div>
</ui:define>
</ui:composition>
I tried PF('dialogVar').show and dialogVar.show(), but it is not showing up.

Answer 1

I think you must add inside your dialog. After generating code,despite what you see in your xhtml page, the dialog will be outside of your form,therefore you need to add it yourself.
try the following code:
<ui:define name="content">
<div id="content">
<div id="verlauf">
<h:form>
<h:commandLink value="Home" action="#{linkController.goHome}"/>
<h:commandLink value="Tickets" action="#{linkController.goTicketindex}"/>
<h:commandLink value="Neues Ticket erstellen" action="#{linkController.goTicketcreate}"/>
</h:form>
</div>
<div id="headline">Neues Ticket erstellen</div>
<h:form>
<div id="stats">
<div id="title">Empfänger</div>
<div class="inputName">An:</div>
<div class="inputContent">
<h:inputText id="user" styleClass="inputText" value="#{ticketController.adress}" />
</div>
<div class="inputName">Betreff:</div>
<div class="inputContent">
<h:inputText id="topic" styleClass="inputText" value="#{ticketController.topic}"
></h:inputText> </div>
</div>
<div id="rechte">
<div id="title">Nachricht</div>
<div class="column">
<div class="inputArea"> <h:inputTextarea id="message" styleClass="inputField" value="#{ticketController.message}" >
<!-- validatorMessage="Bitte geben Sie eine Nachricht ein." >
<f:validateRequired/>-->
</h:inputTextarea> </div>
</div>
<br/>
<h:commandButton value="Datei Uploaden" type="button" styleClass="submitButton" onclick="dialogVar.show()"></h:commandButton>
<h:commandButton value="Anlegen" type="submit" styleClass ="submitButton"
action="#{ticketController.createNewTicket}"></h:commandButton>
</div>
</h:form>
<p:dialog widgetVar="dialogVar" modal="true" minHeight="100" draggable="true" >
<h:form>
<p:fileUpload fileLimit="20000" appendToBody="false" fileLimitMessage="File ist zu groß" fileUploadListener="#{ticketController.fileUploadHandler}"/>
</h:form>
</p:dialog>
</div>