1. 技术文章
  2. Multiple PrimeFaces dialogs on one page

Multiple PrimeFaces dialogs on one page

由 折月煮酒 提交于 2019-12-04 20:41:56

I was able to replicate the problem in my environment. In order to do that I've simplified your home.xhtml code (removing the managedbean references) and here is the changes to the dialogs that made them work:

<p:dialog id="addUserDialog" header="Add Dialog" modal="true" closable="false"
          widgetVar="dlg1" width="620" >

    <h:form id="dlg1form">
        <h:panelGrid columns="3">

            <h:outputLabel for="login" value="Login: "/>
            <p:inputText id="login" required="true"  
                         label="Login: " maxlength="20" >

            </p:inputText>
            <p:message for="login"/>

            <h:outputLabel for="password" value="Password: "/>
            <p:password id="password" required="true" 
                        feedback="true"  label="Password: " maxlength="32"/>
            <p:message for="password" />

            <h:outputLabel for="firstName" value="First Name: "/>
            <p:inputText id="firstName" 
                         label="First Name: " maxlength="20"/>
            <p:message for="firstName"/>

            <h:outputLabel for="lastName" value="Last Name: "/>
            <p:inputText id="lastName"
                         label="Last Name: " maxlength="20"/>
            <p:message for="lastName"/>

            <h:outputLabel for="role" value="Role: "/>
            <p:selectOneMenu id="role" required="true" style="width: 80px;" >
                <f:selectItem itemLabel="user" itemValue="ROLE_USER" />
                <f:selectItem itemLabel="admin" itemValue="ROLE_ADMIN" />
            </p:selectOneMenu>
            <p:message for="role"/>

        </h:panelGrid>

        <p:commandButton value="Cancel" immediate="true" onclick="dlg1.hide()" update="@form">
            <p:resetInput target="addUserDialog"  />
        </p:commandButton>

        <p:commandButton value="Add" update="@form" 
                         oncomplete="if (args &amp;&amp; !args.validationFailed) dlg1.hide()" />
    </h:form>
</p:dialog>


<p:dialog id="addCompDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
          widgetVar="dlg3" width="600">

    <h:form id="dlg3form">
        <h:panelGrid columns="3">

            <h:outputLabel for="pclogin" value="Login: "/>
            <p:inputText id="pclogin" required="true"  
                         label="Login: " maxlength="20">
            </p:inputText>
            <p:message for="pclogin"/>

            <h:outputLabel for="pcpassword" value="Password: "/>
            <p:password id="pcpassword" required="true" 
                        feedback="true"  label="Password: " maxlength="32"/>
            <p:message for="pcpassword" />

            <h:outputLabel for="compName" value="Computer Name: "/>
            <p:inputText id="compName" required="true"
                         label="Computer Name: " maxlength="20"/>
            <p:message for="compName"/>

            <h:outputLabel for="ipaddress" value="IP address: "/>
            <p:inputText id="ipaddress" required="true"
                         label="IP address: " maxlength="20"/>
            <p:message for="ipaddress"/>

        </h:panelGrid>

        <p:commandButton value="Cancel" immediate="true" onclick="dlg3.hide()" process="@this" update="@form">
            <p:resetInput target="addCompDialog" />
        </p:commandButton>

        <p:commandButton value="Add" update="@form" 
                         oncomplete="if (args &amp;&amp; !args.validationFailed) dlg3.hide()" />
    </h:form>
</p:dialog>

<p:dialog id="addAppDialog" header="Add Dialog" draggable="true" closable="false" modal="true"
          widgetVar="dlg5" width="600" >
    <h:form id="dlg5form">
        <h:panelGrid columns="3">
            <h:outputLabel for="appName" value="Name: "/>
            <p:inputText id="appName" required="true"  
                         label="Name: "/>
            <p:message for="appName"/>

            <h:outputLabel for="vendorName" value="Vendor: "/>
            <p:inputText id="vendorName" 
                         label="Vendor: " required="true" />
            <p:message for="vendorName"/>

            <h:outputLabel for="appLicense" value="Requires license: "/>
            <p:selectOneMenu id="appLicense" required="true" style="width: 80px;" >
                <f:selectItem itemLabel="True" itemValue="#{true}" />
                <f:selectItem itemLabel="False" itemValue="#{false}" />
            </p:selectOneMenu>
            <p:message for="appLicense"/>
        </h:panelGrid>

        <p:commandButton value="Cancel" immediate="true" onclick="dlg5.hide()" update="@form" process="@this">
            <p:resetInput target="addAppDialog" />
        </p:commandButton>

        <p:commandButton value="Add" update="@form" 
                         oncomplete="if (args &amp;&amp; !args.validationFailed) dlg5.hide()"/>
    </h:form>
</p:dialog>

Some notes:

  • I've noticed that you where testing validation onclick instead of oncomplete.
  • I've placed the form inside the dialog for no special reason, just habit.
  • I've removed the visible="#{facesContext.validationFailed}" because that won't be necessary.
  • The same happened with the process="@this" on add buttons, see more about Partial Process here.

Consider changing the cancel button logic to something like this:

<p:commandButton value="Cancel" action="#{viewMBean.clearUser}" oncomplete="dlg1.hide()" update="@form" process="@this" />

public void clearUser() {
    newUser = new User();
}
标签
validation
jsf
jsf-2
primefaces
modal-dialog
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!