PrimeFaces Ajax - 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">
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> </td>
<td> </td>
<td class="style3"><h:commandButton
style="width:76px;height:26px" value="Clear" type="reset">
</h:commandButton> <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 : * " /></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 : * " /></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 : * " /></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 : * " /></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"/>
<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" />