Modal dialog not working correctly - jsf-2

Question

I'm working on a JSF/Primefaces application. I want to prevent page behind a primefaces dialog. I tried this code:
<h:form id="form">
<p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item"
selection="#{resourcesTypesMBean.selectedResourceType}"
rowKey="#{item.id}" selectionMode="single">
<f:facet name="header" >
<table style="border: hidden">
<tbody >
<tr >
<td align="left" style="border: hidden">
<p:outputLabel value="List of Resources' Types"/>
</td>
<td align="right" style="border: hidden">
<p:commandButton
oncomplete="ResourceTypeDialogNew.show()"
icon="ui-icon-plus" title="add"/>
<p:commandButton id="btnDelete" title="delete
" actionListener="#{resourcesTypesMBean.deleteResourceType()}"
update="types" icon="ui-icon-trash" />
<p:button outcome="Resources.xhtml"
icon="ui-icon-arrowthick-1-w" title="back"/>
</td>
</tr>
</tbody>
</table>
</f:facet>
<p:column headerText="Name">
<p:outputLabel value="#{item.name}"/>
</p:column>
<p:column headerText="Code">
<p:outputLabel value="#{item.code}"/>
</p:column>
</p:dataTable>
</h:form>
<h:form id="newResourceTypeForm">
<p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew"
resizable="false" modal="true" appendTo="#(body)" showEffect="explode"
hideEffect="explode" style="position: absolute ;"
id="dialogNewResourceType">
<p:panel id="panel">
<p:messages id="messages" />
<p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px">
<f:facet name="header">
<p:graphicImage value="/images/resource.png"/>
</f:facet>
<p:outputLabel value="Name" for="name"/>
<p:inputText id="name" value="#{resourcesTypesMBean.name}"
required="true" requiredMessage="The Name field is required." />
<p:outputLabel value="Code" for="code"/>
<p:inputText id="code" value="#{resourcesTypesMBean.code}"
required="true" requiredMessage="The Code field is required." />
</p:panelGrid>
<div align="right" >
<p:commandButton value="Save" style="margin-right: 5px" icon="ui-
icon-circle-check" oncomplete=" handleSubmitRequest(xhr, status,
args, 'ResourceTypeDialogNew','newResourceTypeForm');"
actionListener="#{resourcesTypesMBean.addResourceType()}"
update=":form:types, :growl" />
<p:commandButton value="Cancel"
oncomplete="ResourceTypeDialogNew.hide();"
icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/>
</div>
</p:panel>
</p:dialog>
</h:form>
When the dialog is shown, the page behind is blocked but save and cancel buttons are not working correctly and the user is automatically logged out from the application.
I need your help.
Update: without modal="true" appendTo="#(body)" it works correctly (both save and cancel buttons).

Answer 1

Can't check the solution life now, but the following looks suspicious:
When you check the rendered XHTML-code (e.g. through Firebug in Firefox), you might recognize that the form newResourceTypeForm is actually empty. With the appendTo="#body", I guess, the dialog panel is attached directly to thebody` - element, and through this is outside any formular. This prevents the buttons inside of work.
Either move the form into the p:dialog, or
try dropping appendTo
try a rewrite appendTo="#form"
Hope one of that might help you go forward, and if - upvotes appreciated - ...