Troubles with primefaces p:datatable in combination with p:dialog

dialog datatable primefaces

16,127

You have your dataTable and your dialog inside <h:form id="formTable">. When you evoke dialog you call: update=":formTable:edit".

You need:

Place dialog outside your main current form <h:form id="formTable">
Place a new <h:form> inside your dialog. Ex: <h:form id="dlgForm">. Everything inside dialog will be inside new h:form.
Call update from dataTable like this: update=":dlgForm:edit". You are refering to form inside dialog and panel grid inside form.

16,127

user1523584

Updated on June 04, 2022

Comments

user1523584 almost 2 years

I've spent hours to solve my problem but unfortunately without success.

I diplay user data in a p:datatable what is working fine. Each row has an p:commandbutton which is supposed to show a p:dialog for editing the selected user. That also works fine. The problem is that the fiedls inside the dialog are not filled with the user data.

Strange is, if I remove all p:inputtext fields from the dialog the remaining h:outputtext fields id="edit_dlg_bngrp" and id="edit_dlg_username" show the data. If i replace them data will be displayed.

my xhtml page

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:sec="http://www.springframework.org/security/facelets/tags">
<h:body>

<ui:composition template="../template/commonTemplate.xhtml">
    <ui:define name="body">

        <h:form id="formTable">
            <div class="largeText alignLeft"
                style="min-width:600px; width: 100%; margin: 0 auto;">

                <p:panel header="Benutzerübersicht" styleClass="largeText" >  

                    <!-- ERROR MESSAGES -->
                    <div class="largeText alignLeft" style="width: 600px;">
                        <p:messages id="messages" />
                    </div>

                    <div style="height: 10px;">
                    </div>


                    <!-- ========================================================================= -->
                    <!-- =======================DATATABLE USER OVERVIEW ========================== -->
                    <!-- ========================================================================= -->

                    <p:dataTable var="user" 
                                 widgetVar="userTable" 
                                 value="#{benutzerBean.userTableData}"
                                 filteredValue="#{benutzerBean.filteredTableData}"
                                 emptyMessage="Keine Daten verfügbar"
                                 paginator="true" rows="25"  
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                     rowsPerPageTemplate="25,50,100" 

                                     >

                            <f:facet name="header" style="background:white;">  
                                <p:outputPanel style="background:white;" >


                                    <div class="floatRight" >
                                        <h:outputText value="Suche:  " />  
                                        <p:inputText id="globalFilter" onkeyup="userTable.filter()" style="width:150px" />
                                    </div>
                                </p:outputPanel>
                            </f:facet>

                            <p:column id="bngroup_id"  filterStyle="display:none"
                                      sortBy="#{user.benutzergruppe.name}" 
                                      filterBy="#{user.benutzergruppe.name}"   
                                      headerText="Benutzergruppe" 
                                      filterMatchMode="contains">
                                <h:outputLabel value="#{user.benutzergruppe.name}" />
                            </p:column>

                            <p:column id="firstname_id" filterStyle="display:none"
                                      sortBy="#{user.vorname}"
                                      filterBy="#{user.vorname}"   
                                      headerText="Vorname" 
                                      filterMatchMode="contains" >
                                <h:outputLabel value="#{user.vorname}" />
                            </p:column>

                            <p:column id="lastname_id" filterStyle="display:none"
                                      sortBy="#{user.nachname}"
                                      filterBy="#{user.nachname}"   
                                      headerText="Nachname" 
                                      filterMatchMode="contains" >
                                <h:outputLabel value="#{user.nachname}" />
                            </p:column>

                            <p:column id="username_id" filterStyle="display:none"
                                      sortBy="#{user.benutzername}" 
                                      filterBy="#{user.benutzername}" 
                                      headerText="Benutzername"   
                                      filterMatchMode="contains">
                                <h:outputLabel value="#{user.benutzername}" />
                            </p:column>

                            <p:column id="email_id" filterStyle="display:none"
                                      sortBy="#{user.email}"
                                      filterBy="#{user.email}"   
                                      headerText="E-mail" 
                                      filterMatchMode="contains" >  
                                <h:outputLabel value="#{user.email}" />
                            </p:column>

                            <p:column id="aktiv_id" filterStyle="display:none"
                                      sortBy="#{user.aktiv}"
                                      filterBy="#{user.aktiv}"   
                                      headerText="Aktiv" 
                                      filterMatchMode="contains" >
                                <h:outputLabel value="#{user.aktiv}" />
                            </p:column>

                            <p:column id="edit_id"
                                      style="width:80px;"
                                      styleClass="alignCenter" >

                                <p:commandButton value="bearbeiten"  update=":formTable:edit" oncomplete="editDialog.show()" style="font-size:10px;">
                                    <f:setPropertyActionListener target="#{benutzerBean.selectedUser}" value="#{user}" />
                                </p:commandButton>
                            </p:column>

                            <p:column id="delete_id"
                                      style="width:80px;"
                                      styleClass="alignCenter"  >
                                <p:commandButton value="löschen" update=":formTable:deleteUserdialog" oncomplete="deleteUserdialog.show()"  style="font-size:10px;">
                                    <f:setPropertyActionListener target="#{benutzerBean.selectedUser}" value="#{user}" />
                                </p:commandButton>
                            </p:column>
                    </p:dataTable>


                    <!-- ========================================================================= -->
                    <!-- =======================  EDIT USER DIALOG      ========================== -->
                    <!-- ========================================================================= -->

                    <p:dialog id="editUserDialog" header="Benutzer bearbeiten" widgetVar="editDialog" 
                              resizable="false" modal="true" showEffect="clip" hideEffect="clip" >
                        <p:panelGrid id="edit"  columns="2" style="width:400px;">

                                <h:outputText value="Benutzergruppe" />
                                <h:outputText id="edit_dlg_bngrp" value="#{benutzerBean.selectedUser.benutzergruppe.name}" />

                                <h:outputText value="Benutzername:" />
                                <h:outputText id="edit_dlg_username" value="#{benutzerBean.selectedUser.benutzername}" />

                                <h:outputText value="Vorname:" />
                                <p:inputText id="edit_dlg_firstname" styleClass="width_100" value="#{benutzerBean.selectedUser.vorname}" />

                                <h:outputText value="Nachname:" />
                                <p:inputText id="edit_dlg_lastname" styleClass="width_100" value="#{benutzerBean.selectedUser.nachname}"  />


                                <h:outputText value="Email" />
                                <p:inputText id="edit_dlg_email" styleClass="width_100" value="#{benutzerBean.selectedUser.email}" />

                                <p:commandButton id="save" value="Speichern"  process="editUserDialog"  actionListener="#{benutzerBean.submitEditUser}" oncomplete="editDialog.hide()" />
                                <p:commandButton value="Abbrechen" type="reset" onclick="editDialog.hide()" />

                        </p:panelGrid>
                    </p:dialog>





                    <!-- ========================================================================= -->
                    <!-- =======================  DELETE USER DIALOG    ========================== -->
                    <!-- ========================================================================= -->  
                    <p:dialog id="deleteUserdialog" header="Benutzer erstellen" widgetVar="deleteUserdialog" resizable="false" modal="true" >
                                <h:outputText id="delete" value="#{benutzerBean.selectedUser.vorname} löschen" />
                    </p:dialog>
                </p:panel>
            </div>
        </h:form>
    </ui:define>
</ui:composition>

My ManagedBean

@Controller
@ManagedBean
@Scope(value="view")
public class BenutzerBean {

@Autowired
BenutzerService benutzerService;


private List<Benutzer> userTableData = new ArrayList<Benutzer>();
private List<Benutzer> filteredTableData;
private Benutzer selectedUser;


public BenutzerBean(){
}

@PostConstruct
public void populateTable(){
    userTableData = benutzerService.getAllBenutzer();
}

public void submitEditUser(){
    saveUser(selectedUser);
}

private void saveUser(Benutzer benutzer){
    benutzerService.saveBenutzer(benutzer);
    populateTable();
}

public List<Benutzer> getFilteredTableData() {
    return filteredTableData;
}

public void setFilteredTableData(List<Benutzer> filteredTableData) {
    this.filteredTableData = filteredTableData;
}

public void setUserTableData(List<Benutzer> userTableData) {
    this.userTableData = userTableData;
}

public List<Benutzer> getUserTableData(){
    return userTableData;
}

public Benutzer getSelectedUser() {
    return selectedUser;
}

public void setSelectedUser(Benutzer selectedUser) {
    this.selectedUser = selectedUser;
}

Benutzer Class

@Entity(name="BENUTZER")
public class Benutzer implements Serializable {


@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column(name="ID")
private Long id;


@ManyToOne
@JoinColumn(name = "BENUTZERGRUPPEN_ID")
@NotNull
private Benutzergruppe benutzergruppe;


@Column(name="VORNAME")
@NotNull
@Length(min=3, message="vorn")
private String vorname;


@Column(name="NACHNAME")
@NotNull
@Length(min=3, message="nach")
private String nachname;


@Column(name="BENUTZERNAME")
@NotNull
@Length(min=4, message="benu")
private String benutzername ;


@Column(name="PASSWORT")
private String passwort;


@Column(name="EMAIL")
private String email;


@Column(name="AKTIV")
private boolean aktiv = true;


@Column(name="GELOESCHT")
@Type(type="org.joda.time.contrib.hibernate.PersistentDateTime")
private DateTime deleted;


@ManyToMany ( fetch= FetchType.EAGER)
@JoinTable( name="BENUTZER_ROLLEN", 
            joinColumns={@JoinColumn(name="BENUTZER_ID")} ,
            inverseJoinColumns={@JoinColumn(name="ROLLE_ID")}
          )
public List<Rolle> rollen = new LinkedList<>();


/////////////////////////////
//  GETTER SETTER
///////////////////////////

public Benutzer(){}

public Benutzer(Benutzergruppe benutzergruppe ,String nachname, String vorname, String username,
        String password, String email,  boolean enabled) {
    this();
    this.benutzergruppe = benutzergruppe;
    this.nachname = nachname;
    this.vorname = vorname;
    this.benutzername = username;
    this.passwort = password;
    this.email = email;
    this.aktiv = enabled;
}



//--------- OTHER METHODS ---------------


public void deleteUser(){
    aktiv = false;
    setDeleted(DateTime.now());
}

public boolean isUserDeleted(){
    return deleted != null;
}

public void disableUser(){
    setAktiv(false);
}

public void enableUser(){
    setAktiv(true);
}

public void addRole(Rolle role){

    if(role == null)
        throw new IllegalArgumentException("Add Role: role must not be null");

    if(!rollen.contains(role)){
        rollen.add(role);
        role.addBenutzer(this);
    }
}

public void removeRole( Rolle role){
    if(role == null)
        throw new IllegalArgumentException("Remove Role: role must not be null");

    if(rollen.contains(role)){
        rollen.remove(role);
        role.removeBenutzer(this);
    }

}


//============================================
// GETTER SETTER
//=========================================

public Long getId() {
    return id;
}


public void setId(Long benutzerId) {
    this.id = benutzerId;
}

public Benutzergruppe getBenutzergruppe() {
    return benutzergruppe;
}

public void setBenutzergruppe(Benutzergruppe benutzergruppe) {
    this.benutzergruppe = benutzergruppe;
}

public String getNachname() {
    return nachname;
}

public void setNachname(String nachname) {
    this.nachname = nachname;
}

public String getVorname() {
    return vorname;
}

public void setVorname(String vorname) {
    this.vorname = vorname;
}

public String getBenutzername() {
    return benutzername;
}

public void setBenutzername(String username) {
    this.benutzername = username;
}

public String getPasswort() {
    return passwort;
}

public void setPasswort(String password) {
    this.passwort = password;
}

public String getEmail() {
    return email;
}

public void setEmail(String email) {
    this.email = email;
}

public boolean isAktiv() {
    return aktiv;
}

private void setAktiv(boolean enabled) {
    this.aktiv = enabled;
}

public List<Rolle> getRollen() {
    return Collections.unmodifiableList(rollen);
}

public void setRollen(List<Rolle> rollen) {
    this.rollen = rollen;
}

public DateTime getDeleted() {
    return deleted;
}

private void setDeleted(DateTime timestamp) {
    this.deleted = timestamp;
}

Has anyone an Idea how i can solve that issue?

Best regards Peter

user1523584 almost 12 years

Firebug brought up formTable:editUserDialog as Id for the p:dialog and formTable:edit as Id for the p:panelGrid. I tried both, but no success.
SteveS almost 12 years

I recently saw a PF bug with autocomplete not working on a modal dialog. Just to troubleshoot try removing the modal and see if it works. Maybe there is something with the ajax on modals.
Thomas Carlisle about 7 years

Thank you so much for this answer. Had been racking my brains for a few hours trying to figure out the proper way to have a page open a dialog with a datatable that has a subset of the data on the main page.