PrimeFaces: adding user using dialog not updating datatable through ajax - ajax

Question

I have a page where some users are displayed through datatable.I have a option to add new user. when the add window is in the same page then the users are added to the datatable through ajax. But if I transfer the add option to primeface dialog the ajax functionality is not working and the datatable is not refreshed.
Here are my codes:
Code1: Here we have used the add user window in the same page -- this one works
<h:form>
<h:panelGrid id="grid" cellpadding="5" columns="2"
style="margin-bottom:10px">
<f:facet name="header">
<p:messages id="msgs" />
</f:facet>
<p:outputLabel for="firstname" value="Firstname:" />
<p:inputText id="firstname" value="#{userView.firstname}" />
<p:outputLabel for="surname" value="Surname:" />
<p:inputText id="surname" value="#{userView.lastname}"
required="true" requiredMessage="Surname is required." />
</h:panelGrid>
<h:panelGrid id="grid2">
<p:dataTable var="user" value="#{userView.getUsers()}">
<p:column headerText="FirstName">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="LastName">
<h:outputText value="#{user.lastname}" />
</p:column>
</p:dataTable>
</h:panelGrid>
<h:panelGrid columns="1">
<p:commandButton value="All" id="btnAll" process="#all" update="grid2"
actionListener="#{userView.save}" />
</h:panelGrid>
</h:form>
and my managed Bean is
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
#ManagedBean
public class UserView {
private String firstname;
private String lastname;
public List<User> dataUser;
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public UserView()
{
dataUser = new ArrayList<User>();
dataUser.add(new User("AA", "LA"));
dataUser.add(new User("AB", "LB"));
dataUser.add(new User("AC", "LC"));
dataUser.add(new User("AD", "LD"));
dataUser.add(new User("AE", "LE"));
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public List<User> getUsers()
{
return dataUser;
}
public void save() {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage("Welcome " + firstname + " " + lastname));
dataUser.add(new User(firstname, lastname));
}
public class User{
public String firstname;
public String lastname;
public User(String fn, String ln)
{
this.firstname= fn;
this.lastname= ln;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
}
}
Code 2: if I use the add user in the pdialog then the page is not getting refreshed. The above managed bean remains same
<h:form>
<h:panelGrid id="grid2">
<p:dataTable var="user" value="#{userView.getUsers()}">
<p:column headerText="FirstName">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="LastName">
<h:outputText value="#{user.lastname}" />
</p:column>
</p:dataTable>
</h:panelGrid>
<h:panelGrid columns="1">
<p:commandButton value="AllPopup" id="btnAllPopup" process="#all"
update="grid2" onclick="PF('dlg1').show();" />
</h:panelGrid>
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
<h:panelGrid id="gridpopup" cellpadding="5" columns="2"
style="margin-bottom:10px">
<p:outputLabel for="firstname1" value="Firstname:" />
<p:inputText id="firstname1" value="#{userView.firstname}" />
<p:outputLabel for="surname1" value="Surname:" />
<p:inputText id="surname1" value="#{userView.lastname}"
required="true" requiredMessage="Surname is required." />
</h:panelGrid>
<h:panelGrid columns="1">
<p:commandButton value="Alladd" id="btnAlladd" process="#all"
update="grid2" actionListener="#{userView.save}" />
</h:panelGrid>
</p:dialog>
</h:form>
Please help in understanding where the issue is