Create edit form for Primefaces table

Question

I want to create edit form for Primefaces table. I tested this code:

<h:form id="form">
    <p:dataTable id="tbl" var="systemuser" value="#{systemusers.systemUsers}"                                 
                 selectionMode="single" selection="#{systemusers.selectedSystemUser}" rowKey="#{systemuser.username}" lazy="true"
                 resizableColumns="true"
                 >

        <p:ajax event="rowSelect" listener="#{systemusers.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
        ....................
    </p:dataTable>

    <p:dialog id="wd" header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2"  columnClasses="label,value">

                <h:outputLabel for="id" value="ID" />
                <p:outputLabel id="id" value="#{systemusers.selectedSystemUser.id}" rendered="#{not systemusers.editable}"/>
                <h:inputText value="#{systemusers.selectedSystemUser.id}" rendered="#{systemusers.editable}" />
                ........
            </p:panelGrid>
        </p:outputPanel>

        <f:facet name="footer">
            <p:commandButton value="Edit System User" rendered="#{not systemusers.editable}"
                             actionListener="#{systemusers.editRecord(false)}">
                <f:ajax render=":form:wd" execute=":form:wd"></f:ajax>
            </p:commandButton>&nbsp;

            <p:commandButton value="Cancel" rendered="#{systemusers.editable}" actionListener="#{systemusers.editRecord(true)}">
                <f:ajax render=":form" execute=":form"></f:ajax>
            </p:commandButton>
        </f:facet>
    </p:dialog>

    <p:contextMenu for="tbl">
        <p:menuitem value="View" update="carDetail" icon="fa fa-search" oncomplete="PF('carDialog').show()"/>
        <p:menuitem value="Delete" update="tbl" icon="fa fa-remove" actionListener="#{systemusers.deleteSystemUser}">
            <p:confirm header="Confirmation" message="Are you sure?" icon="fa fa-warning" />
        </p:menuitem>
    </p:contextMenu>

    <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check" />
        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-remove" />
    </p:confirmDialog>
</h:form>

Managed bean:

@Named
@RequestScoped
public class Systemusers implements Serializable
{
.......
public void editRecord(boolean editable)
    {
        SessionFactory factory = HibernateUtils.getSessionFactory();
        Session session = factory.getCurrentSession();

        try
        {
            session.getTransaction().begin();

            SystemUsersModel obj = new SystemUsersModel();
            obj.setId(selectedSystemUser.getId());
            ..........
            session.update(obj);

            session.getTransaction().commit();

            this.editable = editable;
        }
        catch (Exception e)
        {
            e.printStackTrace();
            session.getTransaction().rollback();
        }
    }
......
private boolean editable = false;

    public boolean isEditable()
    {
        return editable;
    }

    public void setEditable(boolean editable)
    {
        this.editable = editable;
    }
}

When I open the Edit form and I click button Edit System User the form disappears. Probably because I render and execute it. How I can execute the form and under it without closing it?

I tried this but I get the same result. Can you paste some code example? — Peter Penzov, Jul 08 '17 at 21:22
I tried your proposal but again the dialog is hidden. I added form into the dialog and I managed to solve the problem for now. Currently I'm facing this issue: Java Object value="#{systemusers.selectedSystemUser.id}" is empty then I press the edit button. Any idea how I can fix this? — Peter Penzov, Jul 09 '17 at 10:22
A quick note here is that you better have a dedicated h:form for the dialog and one for the table, try to wrap **the content** of p:dialog with a new h:form and let your dataTable with the old h:form, this might lead you to fix any wrong execution or processing problems. — Hatem Alimam, Jul 11 '17 at 07:53
did you try to change your f:ajax to p:ajax and use the listner and the update , i really think this is the solution to your problem — Yagami Light, Jul 13 '17 at 06:56

score 1 · Answer 1 · answered Dec 05 '17 at 19:16

The example code is bad in multiple ways. Two things stand out:

It is not an [mcve]
<f:ajax render=":form" execute=":form"> is superfluous or might even cause the weird behaviour

OP most likely does not know that (quote from the PrimeFaces showcase , emphasis mine)

CommandButton

CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.

So the commandBotton is already ajax anabled and does not need to hava a

<f:ajax render=":form" execute=":form">

inside it. This (most likely) makes an the update run twice. One @none (Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes) and one updating the form. The second one most likely does not have any content. But trying (and debugging) will make things clear. If this is not the answer, the reason cannot be seen in the code and hence it should have been a [mcve]

Create edit form for Primefaces table

1 Answers1