Modal dialog not working correctly

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 - ...