PrimeFaces Ajax

Question

I am trying to make login with jsf. I want to hide login panel when user registered. I did this with jsf ajax.

When I try to do this with primefaces. I am failed.

I triy in jsf ajax like this.

                    <h:form id="register">
                        <table style="width: 49%; margin-right: auto; margin-left: auto;">
                            <tr>
                                <td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    All fields are required.</td>
                            </tr>
                            <tr>
                                <td class="style2" style="height: 51px">Username</td>
                                <td style="width: 17px; height: 51px;">:</td>
                                <td class="style3" style="height: 51px"><h:inputText
                                        id="regusername" style="width:155px;height:24px;"
                                        value="#{userRegister.regUser.username}">

                                    </h:inputText></td>
                            </tr>
                            <tr>
                                <td class="style2" style="height: 51px">Name</td>
                                <td style="width: 17px; height: 51px;">:</td>
                                <td class="style3" style="height: 51px"><h:inputText
                                        id="regname" style="width:155px;height:24px;"
                                        value="#{userRegister.regUser.name}">

                                    </h:inputText></td>
                            </tr>
                            <tr>
                                <td class="style2" style="height: 51px">Mail</td>
                                <td style="width: 17px; height: 51px;">:</td>
                                <td class="style3" style="height: 51px"><h:inputText
                                        id="regmail" style="width:155px;height:24px;"
                                        value="#{userRegister.regUser.mail}">

                                    </h:inputText></td>
                            </tr>
                            <tr>
                                <td class="style2" style="height: 51px">Password</td>
                                <td style="width: 17px; height: 51px;">:</td>
                                <td class="style3" style="height: 51px">



                                <h:inputSecret
                                        id="regpassword" style="width:155px;height:24px;"
                                        value="#{userRegister.regUser.password}">

                                    </h:inputSecret></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td class="style3"><h:commandButton
                                        style="width:76px;height:26px" value="Clear" type="reset">

                                    </h:commandButton> &nbsp; <h:commandButton style="width:75px;height:26px"
                                        value="Register" action="#{userRegister.register()}"
                                        method="post">

                                        <f:ajax execute="regname regusername regpassword regmail"
                                            render="registermessage" />

                                    </h:commandButton></td>
                            </tr>
                            <tr>
                                <td colspan="3"><h:outputText id="registermessage"
                                        value="#{userRegister.message}"></h:outputText></td>
                            </tr>
                        </table>
                    </h:form>

                </h:panelGroup>
                <h:panelGroup rendered="#{userLogin.isLoggedin()== true}"
                    layout="block"> 
                  You are already loggedin !!       
        </h:panelGroup>

When ı try this in primefaces like this:

    <p:panel id ="registerPanel" header="User Registration" align="center"
        style="text-align:center;">
        <table style="width: auto; margin: auto;">
            <tr>
                <td style="text-align: right;"><h:outputLabel for="regname"
                        value="Name Surname : * &nbsp;" /></td>
                <td style="text-align: left"><p:inputText id="regname"
                        value="#{userRegister.regUser.name}" size="40" required="true"
                        label="Name and Surname">
                        <f:validateLength minimum="2" />
                    </p:inputText> <p:watermark for="regname" value="Name Surname" /></td>
            </tr>
            <tr>
                <td style="text-align: right" colspan="2"><p:message
                        for="regname" /></td>
            </tr>

            <tr>
                <td style="text-align: right;"><h:outputLabel
                        for="regusername" value="Username : * &nbsp;" /></td>
                <td style="text-align: left"><p:inputText id="regusername"
                        value="#{userRegister.regUser.username}" size="40"
                        required="true" label="Username">
                        <f:validateLength minimum="3" />
                    </p:inputText> <p:watermark for="regusername" value="Username" /></td>
            </tr>
            <tr>
                <td style="text-align: riht" colspan="2"><p:message
                        for="regusername" /></td>
            </tr>

            <tr>
                <td style="text-align: right;"><h:outputLabel for="regmail"
                        value="E-Mail : * &nbsp;" /></td>
                <td style="text-align: left"><p:inputText id="regmail"
                        value="#{userRegister.regUser.mail}" size="40" required="true"
                        label="Mail">
                        <f:validateLength minimum="2" />
                    </p:inputText> <p:watermark for="regmail" value="mail@example.com" /></td>
            </tr>

            <tr>
                <td style="text-align: right" colspan="2"><p:message
                        for="regmail" /></td>
            </tr>
            <tr>
                <td style="text-align: right;"><h:outputLabel for="paswword"
                        value="Password : * &nbsp;" /></td>
                <td style="text-align: left"><p:password id="regpassword"
                        value="#{userRegister.regUser.password}" size="40"
                        required="true" label="Password">
                        <f:validateLength minimum="5" />
                    </p:password> <p:watermark for="regpassword" value="Password" /></td>
            </tr>
            <tr>
                <td style="text-align: left" colspan="2"><p:message
                        for="regpassword" /></td>
            </tr>
            <tr>
                <td style="text-align: right" colspan="2">

                </td>
            </tr>
            <tr>
                <td style="text-align: right" colspan="2">
                <p:commandButton value="Clear"   image="ui-icon ui-icon-arrowrefresh-1-w" 
         type="reset"/>
         &nbsp;&nbsp; 
         <p:commandButton value="Register" image="ui-icon ui-icon-disk" 
         action="#{userRegister.register()}" method="post">

         <f:ajax
                                            render="registerpaneli" />

         </p:commandButton>
                </td>
            </tr>

        </table>

-->

    </h:panelGroup>

I registraion panel cant hiden.

What is the problem ?

Answer 1

Remove the

<p:commandButton ....>
   <f:ajax render="what-ever">
</p:commandButton>

By

<p:commandButton update="what-ever" ../>

Furthermore, you can read Primefaces' Document and its demo.

Because in Primefaces, most components are compatible with Ajax, especially <p:commandButton/> because it has Ajax turned on by default.

Answer 2

In PrimeFaces, <p:commandButton> already has built-in ajax functionality. You don't need to use <f:ajax>. In fact, <f:ajax> cannot be used with PrimeFaces. If you really need to use it, you must use <p:ajax> instead.

To fix your issue, I think you should change you button like this:

<p:commandButton value="Register" actionListener="#{userRegister.register}" update="registerPanel" />