CODEWITHSUNDEEP
jsf-2primefaces
Trival
Trival

Reputation: 583

Primefaces - Not displayed dialog requires input

I've tried to develope a simple webapp with a "login-feature" for that I've created a dialog with primefaces. If I click on login, the dialog opens, I can login and also logout. But If I changed the site then I can't logout because the dialog want's that I enter the required fields

I'm running Primefaces 5.2 on Glassfisch 4.0

Here is a complete war file with all the code that shows the problem. (Credentials for login are user: admin | password: admin) issueShowCase.war

template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <ui:insert name="head" />
</h:head>
<h:body>
    <h:form id="mainForm">
        <p:growl id="messages" showDetail="true" showSummary="false"/>
        <h:messages />
        <p:menubar>
            <p:submenu label="Sites" icon="ui-icon-document">
                <p:menuitem value="Recipes" outcome="page1.xhtml"/>
                <p:separator />
                <p:menuitem value="Categories" outcome="page2.xhtml"/>
            </p:submenu>
            <f:facet name="options">
                <h:panelGroup id="loginLogout">
                    <p:commandButton rendered="#{not empty user}" value="Logout" title="Logout #{user}" icon="ui-icon-extlink" actionListener="#{loginController.logout}" update="loginLogout messages content" />
                    <p:commandButton rendered="#{empty user}" value="Login" icon="ui-icon-extlink" onclick="PF('loginDlg').show();" />
                </h:panelGroup>
            </f:facet>
        </p:menubar>
        <h:panelGroup id="content">
            <ui:insert name="content"></ui:insert>
            <ui:insert name="body"></ui:insert>
        </h:panelGroup>
        <p:dialog header="#{i18n['title.login']}" widgetVar="loginDlg" modal="true">
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel for="username" value="Username:" />
                <p:inputText id="username" value="#{loginController.userName}" required="true" label="username" />
                <h:outputLabel for="password" value="Password:" />
                <p:password id="password" value="#{loginController.password}" required="true" label="password" />
                <f:facet name="footer">
                    <p:commandButton value="Login" update="loginLogout messages content" actionListener="#{loginController.login}" oncomplete="handleLoginRequest(xhr, status, args)" />
                </f:facet>
            </h:panelGrid>
        </p:dialog>
    </h:form>
    <script type="text/javascript">
        function handleLoginRequest(xhr, status, args) {
            if (args.validationFailed || !args.loggedIn) {
                PF('loginDlg').jq.effect("shake", {
                    times : 3
                }, 500);
            } else {
                PF('loginDlg').hide();
            }
        }
    </script>
</h:body>
</html>

Upvotes: 0

Views: 655

Answers (2)

Trival
Trival

Reputation: 583

Thanks Kukeltje for your help. With thinking about the problem that I now need to use the process-attribute on every button I found the solution.

I put the dialog in an own form-tag and now it works like a charm.

    <h:panelGroup id="content">
        <ui:insert name="content"></ui:insert>
        <ui:insert name="body"></ui:insert>
    </h:panelGroup>
</h:form>
<h:form id="dlgForm">
    <p:dialog header="#{i18n['title.login']}" widgetVar="loginDlg" modal="true">
        <h:panelGrid columns="2" cellpadding="5">
            <h:outputLabel for="username" value="Username:" />
            <p:inputText id="username" value="#{loginController.userName}" required="true" label="username" />
            <h:outputLabel for="password" value="Password:" />
            <p:password id="password" value="#{loginController.password}" required="true" label="password" />
            <f:facet name="footer">
                <p:commandButton  value="Login" update=":mainForm:loginLogout :mainForm:messages :mainForm:content" actionListener="#{loginController.login}" oncomplete="handleLoginRequest(xhr, status, args)" />
            </f:facet>
        </h:panelGrid>
    </p:dialog>
</h:form>

Upvotes: 1

Kukeltje
Kukeltje

Reputation: 12337

Add a process attribute on the logout button to only process the commandbutton, so give it a value of '@this'

<p:commandButton process="@this" rendered="#{not empty user}" value="Logout" title="Logout #{user}" icon="ui-icon-extlink" actionListener="#{loginController.logout}" update="loginLogout messages content" />

Upvotes: 0

Related Questions