Editing a record with Daialog primefaces framework

Question

I’m a beginner in the java and java web world, starting with jsf, primefaces and I’m having a problem that I’m not able to solve. I have a datatable listing some data, I have the ajax event to select a field in the table and an edit button. in doing so it should open a modal window with the data to do the editing, which I am unable to do.

Code of modal window:

public void abrirDialogo() {
    Map<String, Object> options = new HashMap<>();
    options.put("modal", true);
    options.put("resizable", false);
    options.put("width", 400);
    options.put("height", 300);

    RequestContext.getCurrentInstance().openDialog("frmEstadosMan", options, null);
}

Code for the ajax event

<p:ajax event="rowSelect"/>

Code of the edit button

<p:commandButton title="Editar" value="Editar" icon="fa fa-edit"   
        action="#{estadosBean.abrirDialogoEdt}" process="@this"> 
<f:setPropertyActionListener target="#{estadosBean.estado}" value="#{estado}" />
</p:commandButton>

In some times when I edited the code, the editing window even opened, but empty, without the data of the grid line that was selected.

Answer 1

If you follow the example first faces can help you...

https://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml

Where in the commandButton has a setPropertyActionListener that arrow the object car for the variable selectedCar in your bank, and the oncomplete opens your dialog box multiCarDialog viewing the variable data.

<p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
    <p:column style="width:32px;text-align: center">
         <p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">
            <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

Dialogue box

<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
    <p:outputPanel id="carDetail" style="text-align:center;">
        <p:panelGrid  columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
            <f:facet name="header">
                <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/> 
            </f:facet>

            <h:outputText value="Id:" />
            <h:outputText value="#{dtSelectionView.selectedCar.id}" />

            <h:outputText value="Year" />
            <h:outputText value="#{dtSelectionView.selectedCar.year}" />

            <h:outputText value="Color:" />
            <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

            <h:outputText value="Price" />
            <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
        </p:panelGrid>
    </p:outputPanel>
</p:dialog>

Of course for editing, you will need to put a form in the dialog box with the components you want and a button to save the information...